Angular DataTable添加mat-sort-header后无法修改表头字体颜色如何解决

问题根因 #

添加mat-sort-header指令后，Angular Material会自动在表头单元格内部渲染mat-sort-header-container容器，用于包裹表头文本和排序箭头，该容器自带官方默认的字体颜色样式，优先级高于你给.mat-header-row设置的color属性，因此样式被覆盖，只有移除mat-sort-header时你设置的颜色才会生效。

解决方法 #

你可以通过针对性的高优先级CSS规则命中对应元素，有两种实现方式：

方式1：写到组件独立样式文件中 #

需要加上::ng-deep穿透Angular的视图封装，让样式作用到内部的Material组件元素上：

/* 表头文本颜色 */
::ng-deep .mat-header-cell .mat-sort-header-container {
  color: #fff;
}

/* 排序箭头颜色 */
::ng-deep .mat-sort-header-arrow {
  color: #fff;
}

方式2：写到全局样式文件中 #

直接把以下代码添加到项目全局样式文件（通常为src/styles.css）即可，无需加::ng-deep：

/* 表头文本颜色 */
.mat-header-cell .mat-sort-header-container {
  color: #fff;
}

/* 排序箭头颜色 */
.mat-sort-header-arrow {
  color: #fff;
}

如果担心样式污染其他页面的表格，也可以给当前页面的外层容器加专属类名，提升选择器优先级，避免全局生效：

/* upload-data-templates是你当前页面外层section的类名 */
.upload-data-templates .mat-header-cell .mat-sort-header-container {
  color: #fff;
}
.upload-data-templates .mat-sort-header-arrow {
  color: #fff;
}

保留你原有设置表头背景的.mat-header-row { background: #005173; }规则即可，无需修改。

内容的提问来源于stack exchange，提问作者subhra_user