Question

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

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

Answer 1

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

尝试这样的事情：

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

此外，请确保将其添加到main style.css文件中-否则似乎无法正常工作。至少对我没用。

让我知道这是否对您有用。

Answer 2

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

::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 3

您可以这样更改颜色：

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