如何在Angular Material 6中为选项卡应用自定义样式？

Question

I am using two tab groups namely tab1 and tab2. This is my code:

<mat-tab-group class="tab1">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<mat-tab-group class="tab2">
  <mat-tab label="Fourth"> Content 4 </mat-tab>
  <mat-tab label="Fifth"> Content 5 </mat-tab>
  <mat-tab label="Sixth"> Content 6 </mat-tab>
</mat-tab-group>

Now I need to apply custom CSS differently for both of the tabs (label, label-content, label-height, label-padding). But it is not working. I even tried overriding it with ::ng-deep , it is not applying. Here's my CSS code:

::ng-deep .tab1 > .mat-tab-label-content{
   color: red !important;
   padding: 10px;
   margin: 10px;
}

I also tried giving this, but not working:

::ng-deep .tab1 .mat-tab-label-content{
   color: red !important;
   min-width: 0;
   padding: 30px;
   margin: 30px;
}

So please suggest me how to apply css for each tabs respectively.

Answer 1

This code should do the trick:

.tab1  .mat-tab-label-content {
    color: red;
}

See example: https://angular-ekc6jo.stackblitz.io/

Are you sure your CSS is loaded properly?