如何為 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;
}