angular - 样式 "mat-sort-header-sorted"在 mat-table 教程中没有效果？

Question

我正在尝试学习一些 Angular 和 Material Design，并且正在查看 mat-tables 教程:https://material.angular.io/components/table/examples

在示例“带排序的表格”中，CSS 中有以下样式定义:

th.mat-sort-header-sorted {
  color: black;
}

我真的不明白它在做什么...我原以为排序列的标题将以黑色突出显示，但是当我尝试将其更改为红色时，我没有注意到任何差异。

我尝试在我的环境和他们的 StackBlitz 示例中更改为“红色”:https://stackblitz.com/angular/jxmdlyyrgka?file=app%2Ftable-sorting-example.ts

这是某种错误还是我看错了方向？谢谢!

Answer 1

使用 ::ng-deep 可以访问标记中定义的类作为样式的替代方法。

::ng-deep 已弃用，可以删除，也可以使用

ViewEncapsulation.None 在组件装饰器中以避免使用::ng-deep

 ::ng-deep .mat-sort-header-sorted {
     color: red; /*change color of header*/
 }

 ::ng-deep .mat-sort-header-arrow {
   color: red; /*change color of arrow*/
 }