0

我正在使用两个选项卡组，即 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。

4

1 回答 1

0

这段代码应该可以解决问题：

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

参见示例：https ://angular-ekc6jo.stackblitz.io/

您确定您的 CSS 已正确加载吗？

于 2018-07-31T13:25:22.237 回答