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

问题描述

我有材质角度 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>

解决方法

您可以通过添加这样的类来实现：

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

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