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

Question

我有材料角垫选项卡组件，我想为每个垫子选项卡设置不同的下划线颜色，我尝试使用 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>

Answer 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;
}

您可以使用其他选项卡重复此操作。