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

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加载正确吗？