How to override styles for two different mat-tab elements used in same page

Question

I have two different mat-tab section used in same component in my angular application. How to override styles of mat-tab because i need to apply two different styles for both the tabs. Say, I need to have mat-label as white color in one mat-tab and in the other one, I need to have black color.

<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="onChange($event)">
            <mat-tab label="Content 1">
               
            </mat-tab>
            <mat-tab label="Content 2">
            </mat-tab>
        </mat-tab-group>



<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="onChange($event)">
            <mat-tab label="Content 3">
               
            </mat-tab>
            <mat-tab label="Content 4">
            </mat-tab>
        </mat-tab-group>

Answer 1

I would suggest using:

::ng-deep mat-tab {
  /*Your styles here*/
}

If this does not work, try using:

::ng-deep mat-tab {
  /*Your styles here*/ !important; 
}

Although I would not advise the use of !important unless you have a very specific case.