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

Question

我有一个使用角度材料 7 中的垫片的组件。

我想根据打字稿变量的布尔值更改选项卡的背景颜色。

问题是我只能在所有选项卡上应用 CSS

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

如何创建我可以在特定选项卡上应用的 CSS 类。

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

HTML:

 <mat-tab-group mat-align-tabs="center" dynamicHeight="true">
  <mat-tab label="tab1">
    Hello
  </mat-tab>
  <mat-tab label="tab2">
    Hello2
  </mat-tab>
</mat-tab-group>

原文由 A.Service 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

你必须添加

encapsulation: ViewEncapsulation.None

并像这样使用特定的 css 选择器：

HTML:

 <mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
  <mat-tab label="First" [aria-label]=backgroundColorToggle.value> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

CSS：

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

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

你可以在 这里 找到例子

如果您想要所有选项卡：

您有专门的 API。

只需像这样使用 backgroundColor 属性：

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

你可以在 这里 找到完整的例子

原文由 Ziv Weissman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可能不想设置 encapsulation: ViewEncapsulation.None ，这将使该组件的样式也应用于所有其他组件。

相反，您可以在 styles.scss 中设置选项卡的颜色，如下所示：

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

原文由 Jonas 发布，翻译遵循 CC BY-SA 4.0 许可协议