Question

我正在尝试学习一些“角度和材质设计”，并且正在看关于垫子表的教程：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*/
 }

Answer 2

请如下定义自定义CSS样式：

.text-underline {
  text-decoration: underline !important;
}

.text-bold {
  font-weight: bold !important;
}

.color-black {
  color: black !important;
}

<th class="text-underline text-bold color-black" mat-header-cell *matHeaderCellDef mat-sort-header> value </th>

样式“ mat-sort-header-sorted”在mat-table教程中无效吗？

2 个答案: