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

公共小巴

我正在尝试学习一些角度和材料设计,并且正在看关于垫子表的教程: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

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

内纳德·拉达克(Nenad Radak)

使用::ng-deepcan可以访问标记中定义的类,以替代其样式。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

删除mat-sort-header中的默认消息

如何在mat-menu中设置空消息的样式?

在mat-table父级中使用ngif时,mat-filtering / mat-sort无法正常工作

修正 mat-ccard-header 中的 mat-card-avatar 图像高度

在 mat-header-col 中垂直居中文本?

mat-sort 在 angular 8 中无法正常工作

设置禁用的Mat扩展面板的样式

Angular - 子组件中的 mat-list 内的样式滚动条

防止 mat-expansion-panel-header 中的滑动切换扩展面板

在opencv中复制Mat

将样式添加到 mat-autocomplete 的 mat-option

使用mat-slide-toggle更改文本样式

从 Angular 6 组件动态设置 mat-tab 属性的样式

angular - 覆盖 mat-form-field 继承的样式

Angular 11 - mat-sort 在 ng-modal 表中不起作用

mat-autocomplete 在 mat-table 中不起作用

将 mat-sort-header 升序/降序图标更改为自定义,例如 font-awesome caret-down/caret-up Angular 8

角材料:如何在“ mat-card-header”中使用“ mat-icon”作为“ mat-card-avatar”?

角材料.mat-icon-button类未出现在index.html的样式部分中

如何为不同的mat-card元素操纵mat-card-header-text类?

Angular 7的mat-table中的mat-checkbox和mat-checkbox标头问题

右对齐表格标题(mat-header-cell)

对mat-header-cell使用条件属性绑定

如何将 div 与 mat-expansion-panel-header 对齐?

角<mat-expansion-panel-header>不会加载

mat-expansion-panel-header 折叠时的背景颜色

可以在Go中读取.mat文件吗?

重新分配Mat指针或作为ROI释放源Mat时会自动释放Mat指针吗?

您如何处理Material2卡中带有mat-card-header-text的div?