有没有办法为每个 mat-tab 设置不同的下划线颜色？

【问题标题】：There is way to set different underline color for each mat-tab?有没有办法为每个 mat-tab 设置不同的下划线颜色？
【发布时间】：2021-02-05 10:50:23
【问题描述】：

我有材质角度的 mat-tab 组件，我想为每个 mat-tab 设置不同的下划线颜色，我尝试使用 backgroundColor 和 selectedTabChange 属性，但我无法管理

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model'>Content</mat-tab>
            <mat-tab label='IPV Market Data'>Content</mat-tab>
            <mat-tab label='Collateral'>Content</mat-tab>
            <mat-tab label='Fair Value Level'>Content</mat-tab>
 </mat-tab-group>

【问题讨论】：

标签： angular angular-material angular-material2 mat-tab

【解决方案1】：

您可以通过添加这样的类来做到这一点：

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model' class="blue">Content</mat-tab>
            <mat-tab label='IPV Market Data' class="orange">Content</mat-tab>
            <mat-tab label='Collateral' class="green">Content</mat-tab>
            <mat-tab label='Fair Value Level' class="yellow">Content</mat-tab>
 </mat-tab-group>

然后在你的 css 中：

.mat-tab-label.blue {
  border-bottom: 1px solid blue;
}

您可以对其他标签重复此操作。

【讨论】：