Question

我正在使用Material在Angular 9项目中工作。

我有一个页面，其中有一些材料可供选择，还有一个材料分页器（使用下拉菜单更改每页的项目）。我想在分页器的垫选择中修改垫选项的样式，但我不希望这会影响页面上的其他垫选择。

使用此选项可编辑页面上的所有垫选择。

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

有没有一种方法可以指定要设置样式的垫子？

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

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

1 个答案: