样式“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*/
 }