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

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

1 个答案: