Html 如何更改特定角度材质选项卡的背景色？

我有一个组件使用角材料7的mat tab

我想根据typescript变量的布尔值更改选项卡的背景色

问题是，我只能将CSS应用于具有

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

如何创建可以应用于特定选项卡的CSS类

我有一个标准组件。我尝试使用封装：viewEn封装。没有，但这只允许我更改上面提到的所有选项卡

HTML:

你好
你好

编辑： 如果要更改单个选项卡，可以使用aria label输入参数

您必须添加

encapsulation: ViewEncapsulation.None

并使用特定的css选择器，如下所示：

HTML:

你可以找到例子

如果要为所有选项卡设置：

你有一个专门的API

只需使用backgroundColor属性，如下所示：

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">

---

您可以找到完整的示例

您可能不想设置

封装：viewEn封装。无

，这将使此组件的样式也应用于所有其他组件

相反，您可以在

样式中设置选项卡的颜色。scss

如下所示：

.mat-tab-header{
    background-color: #424242;
}

---

你想要这样的东西，我想改变一个标签的颜色，而不是整个标签组的颜色。我如何处理这个问题？像这样使用aria标签会破坏访问性，因为屏幕阅读器会说“backgroundColorToggle.value”，而不是标签。

[aria-label=primary] {
  background-color: blue;
}

[aria-label=accent] {
  background-color: aqua;
}

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">

.mat-tab-header{
    background-color: #424242;
}