如何更改 Angular Material 中数据表标题中排序箭头的颜色？

Question

我正在尝试更改 Angular Material 数据表中排序箭头的标题颜色。这是一个链接：链接到数据表。

排序箭头的默认颜色是 gary。我想换成白色。尽管付出了很多努力，我还是无法改变。请帮忙。

Answer 1

遇到了类似的问题，经过一些努力，可以使用以下代码修改样式。

::ng-deep .mat-sort-header-arrow {
    color: #fff;
}

请注意这里提到的：https : //blog.angular-university.io/angular-host-context/ 以这种方式使用 ngdeep 将适用于在当前视图中共享元素的所有组件。因此，如果您的视图中有两个来自不同组件的排序表，这将禁用它们中的箭头。

为了改善这一点，在您的 mat-sort-header 上应用一个自定义类：

<th mat-header-cell mat-sort-header *matHeaderCellDef class="hide-arrow">

然后更新你的 CSS：

::ng-deep .hide-arrow .mat-sort-header-arrow {
    color: #fff;
}

现在自定义 CSS 将仅适用于目标元素

Answer 2

刚刚有完全相同的问题。我发现颜色正在改变，但由于不透明度设置，它并不那么明显。

尝试这样的事情：

 .mat-sort-header-arrow {
color: #fff !important;
opacity: 1 !important;
}

另外，请确保将其添加到主 style.css 文件中 -- 否则似乎不起作用。至少对我不起作用。

让我知道这是否适合您。

Answer 3

你可以这样改变颜色：

.mat-sort-header-arrow {
  color: red(color you want) !important;
}