有办法为每个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

1. 在

   @angular/material

   版本

   "^15.1.3"

   中，您将看到CSS自定义属性：允许使用

   --mdc-tab-indicator-active-indicator-color

   。

2. 在继续编写代码之前，请确保在您的

   encapsulation: ViewEncapsulation.None

   装饰器中指定

   @Component

   。

3. 因此，代码：

.mdc-tab-indicator__content--underline {
  --mdc-tab-indicator-active-indicator-color: orange;
}

Answer 2

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

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

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

Answer 3

我确实建议使用材质变量，就像沃登建议的那样。话虽如此，我根本不知道这个变量，而且缺乏他们的文档。您可以定位 .mat-mdc-tab-link 并使用 :first-child、:last-child、:nth-child(x) 等。

.mat-mdc-tab-link {
  &:first-child {
    background-color: rebeccapurple;
  }

  &:nth-child(2) {
    background-color: purple;
  }
}