时间戳

首页 > 解决方案 > 如何为特定材料选择样式

css - 如何为特定材料选择样式

问题描述

我正在使用 Material 从事 Angular 9 项目。

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

使用它编辑页面上的所有垫选择。

::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;
}

但我需要指定只修改分页器选择的选项。我尝试向 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

有没有办法指定我正在造型的垫子选择？

标签： cssangularsassangular-material

解决方案

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

推荐阅读