仅在Angular 9的分页器内需要为mat-select-option的div添加类或样式

Posted 2023-01-15

有人可以帮我找到下图的解决方案吗？

即mat-select-option内的container的div mat-paginator应该为此div附加一个类或样式。

<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>

<div>
<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample2">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>
</div>

<table >

<!--Here is the following mat-paginator's [pageSize]="[10, 15, 20]" that generates the mat-select with the options 10, 15, 20 -->

<mat-paginator [length]="totalRecords" [pageSize]="[10, 15, 20]" [pageSizeOptions]="1.pageSizeOptions"
    showFirstLastButtons></mat-paginator>

</table>

</main-componont>

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9ZTnhBTy5wbmcifQ==” alt =“在此处输入图像描述] [1”>

答案

您可以尝试下面的代码。您需要使用ng-deep。

:host ::ng-deep.mat-paginator .mat-paginator-container
  justify-content: flex-start;

另一答案

[您可以只使用一个简单的CSS类，您必须将其添加到每个元素或更改该元素的根类，并在各处进行更改...我不确定您的确切目标是什么，但这是我的目标的意思。

一旦添加到您的主要style.css文件，这将更改所有垫子选项

.mat-option
  color: red !important;

这将仅更改具有此类的元素，该类也可以添加到组件的CSS文件或主style.css文件中...

.sample-class 
    color: red !important;