如何更改“角度材质”选项卡的样式？

Question

如何设置活动标签的样式？

我尝试使用此方法，但对我不起作用：

::ng-deep mat-tab-label-active{
   background-color: red;
}

Answer 1

你可能忘记了. ，请尝试.mat-tab-label-active 。

如果这不起作用，请尝试使用!important强制执行。

不知道是否需要::ng-deep

Answer 2

我们不应该使用ng-deep，它是已弃用的阴影穿透后代组合器的一部分，该组合器将从主要浏览器中删除。

您应该只可以参考.mat-tab-label-active .myCustomClass。 但是，您可能还需要确保将视图封装设置为none。

Answer 3

DrNio所说的可能是正确的，但此答案也应有所帮助： https ://stackoverflow.com/a/45941592/7653320

它告诉您在组件中设置encapsulation: ViewEncapsulation.None ，然后无需使用::ng-deep即可设置选项卡的样式。

Answer 4

如果尝试在自己组件的scss为角度垫组件设置任何颜色， scss此操作将始终失败。 因为所有角垫组件的颜色（例如warn色， primary色等）都设置有!important 。

为了能够覆盖它们，可以使用!important ：（在您自己组件的scss ）

.mat-tab-label-active {
    background-color: red !important;
}

或在全局styles.scss设置颜色：

.mat-tab-label-active {
    background-color: red;
    //does not require "!important"
}

全局样式scss的优先级高于在角垫组件中设置的color !important内部，因此您无需添加!important 。