如何设计特定材质选择的样式

Question

我正在做一个Angular 9项目，使用的是材料。

我有一个页面，它有一些材料选择，和一个材料分页器(它使用一个下拉列表来更改每一页的项目)。我想在分页器的mat select中修改mat选项的样式，但我不希望这影响页面上的其他mat选择。

使用此选项可以编辑页面上的所有mat-select。

::ng-deep mat-option:last-child:before {
  content: "All";
  float: left;
  text-transform: none;
  top: 4px;
  position: relative;
}
::ng-deep mat-option:last-child .mat-option-text {
  display: none;
  position: relative;
}

但是我需要指定只修改分页器select的选项。我试着给mat-paginator添加一个类，但是没有起作用。

<mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]"
      [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
    </mat-paginator>

我还做了一个快速的https://stackblitz.com/edit/style-specific-mat-select

有没有办法指定我要设计哪种垫子的样式？

Answer 1

ng-deep是不推荐使用的，所以你应该使用没有封装的组件，所以：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

您创建的css类应该将其封装在另一个类的div中，并以这种方式定义它们：

css

.custom-style-paginator-select {
  mat-option:last-child:before {
    content: "All";
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
  }
  mat-option:last-child .mat-option-text {
    display: none;
    position: relative;
  }
}

html

<div class="custom-style-paginator-select">
  <mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]" [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
  </mat-paginator>
</div>

有关详细信息，请参阅：

https://angular.io/guide/component-styles#view-encapsulation

https://material.angular.io/guide/customizing-component-styles

https://material.angular.io/guide/theming#defining-a-custom-theme