如何为 Angular 材料中的每个 Mat-Tab 设置不同颜色的 Mat-Ink-Bar？

Question

无论标签是否处于活动状态，我都试图始终用不同的颜色设置每个mat-tab的样式。 我可以为所有选项卡设置mat-ink-bar的样式，但我很难为每个选项卡弄清楚这一点。 请帮忙。

 /* label style */.mat-tab-label{ background: green; color:white; } /* ink bar style */.mat-tab-group.mat-primary.mat-ink-bar{ background: yellow; height: 10px; } /* Trying to style the second mat-ink bar */.mat-tab-group.mat-primary >.USD.mat-ink-bar{ background: blue; height: 10px; }

 <mat-tab-group> <mat-tab class="USD" label="USD">USD</mat-tab> <mat-tab class="AUD" label="AUD">AUD</mat-tab> <mat-tab label="AED">AED</mat-tab> <mat-tab label="CAD">CAD</mat-tab> </mat-tab-group>

Answer 1

这可能是一个愚蠢的答案，但是您是否尝试过这样做？

  .USD{
  background: blue;
  height: 10px;
}