如何在Angular Material 6中為選項卡應用自定義樣式？

Question

我正在使用兩個選項卡組，即tab1和tab2。 這是我的代碼：

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

現在，我需要對兩個選項卡（標簽，標簽內容，標簽高度，標簽填充）分別應用自定義CSS。 但這是行不通的。 我什至嘗試用::ng-deep覆蓋它，但沒有應用。 這是我的CSS代碼：

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

我也嘗試給出這個，但是不起作用：

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

因此，請建議我如何分別為每個標簽應用CSS。

Answer 1

這段代碼可以解決這個問題：

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

參見示例： https : //angular-ekc6jo.stackblitz.io/

您確定CSS加載正確嗎？