How To Style Mat-Ink-Bar with Different Color for Each Mat-Tab In Angular Material?

Question

I am trying to style each mat-tab with a different color at all time, whether the tab is active or not. I am able to style the mat-ink-bar for all tabs but I am having a hard time figuring this out for each tab. Please help.

 /* 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

This might be a stupid answer, but have you tried just doing this?

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