样式“mat-sort-header-sorted”在 mat-table 教程中没有效果？答案

【问题标题】：Style "mat-sort-header-sorted" has no effect in mat-table tutorial?样式“mat-sort-header-sorted”在 mat-table 教程中没有效果？
【发布时间】：2019-06-14 03:19:00
【问题描述】：

我正在尝试学习一点 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

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

【问题讨论】：

标签： angular angular-material

【解决方案1】：

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

.text-underline {
  text-decoration: underline !important;
}

.text-bold {
  font-weight: bold !important;
}

.color-black {
  color: black !important;
}

&lt;th class="text-underline text-bold color-black" mat-header-cell *matHeaderCellDef mat-sort-header&gt; value &lt;/th&gt;

【讨论】：

如果我再次找到我的项目，我会尝试看看它；）还是谢谢你！
这仅适用于th 而不是文本实际嵌套在其中的button 元素。仅当您的文本没有溢出到单元格内的多行文本中时，此解决方案才有效。如果是，则需要使用::ng-deep 的解决方案

【解决方案2】：

使用::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*/
 }

【讨论】：

它有效。让我在接受答案之前进行一些测试
所以我认为他们的教程中缺少一些东西。我从未听说过这种“封装”，它的作用还不是很清楚。无论如何，谢谢你的回答。
欢迎您，这里有一些关于 ViewEncapsulation 的帖子，以便更好地理解。 dzone.com/articles/what-is-viewencapsulation-in-angular，在官方的角度页面上也有一些解释。
mhm，我阅读了你的文章和一些关于 Angular 的文章，但我仍然感到困惑......如果 'ViewEncapsulation.Emulated' 是默认值，我会假设我的每个组件都呈现“它的“风格......为什么在这种情况下它不起作用？这是浏览器的问题吗？
ng-deep 通常与 Angular Material 等组件一起使用，并且无法使用常规 css 访问，ng-deep 会穿透 css 中的目标类。官方页面angular.io/guide/component-styles上也有说明跨度>