Question

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

我尝试使用它，但是对我来说不起作用：

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

Answer 1

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

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

不确定是否需要::ng-deep

Answer 2

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

它告诉您在Component中设置encapsulation: ViewEncapsulation.None，然后就可以在不使用::ng-deep的情况下设置标签的样式。

Answer 3

如果您尝试在自己的组件的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

Answer 4

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

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