更改一种精确的 mat-tab 背景颜色 - Angular Material答案

【问题标题】：Change one precise mat-tab background color- Angular Material更改一种精确的 mat-tab 背景颜色 - Angular Material
【发布时间】：2020-05-23 15:27:14
【问题描述】：

我想更改一个精确的 mat-tab 背景颜色，有 this 解决方案可以工作，但比需要的要复杂一些。

我有这个可以工作的当前代码，但我想删除第一个带有 aria-label id 的按钮

HTML：

<div>
  <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup" value="custom">
    <mat-button-toggle value="custom"> custom </mat-button-toggle>
  </mat-button-toggle-group>
</div>

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

CSS：

[aria-label=custom] {
  background-color: #5473a1;
  color: #ffffff;
}

我想要一些更简单的东西，但它不起作用：

<mat-tab-group>
  <mat-tab label="First" [aria-label]="custom"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>

谢谢！

【问题讨论】：

您可以添加精确的 CSS。
我没有找到任何方法来选择精确的 mat-tab，我无法在其中添加类（或者我不知道如何，class="" 不起作用）我可以更改使用 ng-template 的文本颜色并在我的选项卡中添加一个跨度，但无法选择选项卡本身
您是否尝试过使用id，然后使用CSS 对其进行样式化？你能提供一个stackblitz吗？
不行，material generate new element si classes and ids are lost...不过我找到了解决办法，明天再上传！谢谢你

标签： html css angular angular-material mat-tab

【解决方案1】：

这应该针对第一个标签（正文）。

.mat-tab-group .mat-tab-body:first-child .mat-tab-body-content{background: red;}

【讨论】：

【解决方案2】：

这是我找到的解决方案：

.mat-tab-label-content {
    .my-tab-color {
        &.my-tab-color-green {
            background-color: $mygreen;
            color: white;
        }
    }
}

【讨论】：