样式垫标签标签 - 角材料

Question

我想弄清楚如何更改 mat-tab 标签的颜色。我已经浏览了与样式 mat-tabs 相关的所有堆栈溢出帖子，但没有一个解决方案将文本颜色从白色更改为黑色；现在它看起来像这样。您甚至看不到非活动选项卡。

如何让非活动链接显示为黑色？

<div class="buttonRow">
  <mat-tab-group id="linkLabel" mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4" >
    <div class="tabContent" >
      <mat-tab id="tab1" label="Tab1" >  Content 1 </mat-tab>
      <mat-tab id="tab2" label="Tab2"> Content 2 </mat-tab>
      <mat-tab id="tab3" label="Tab3"> Content 3 </mat-tab>
    </div>
    </mat-tab-group>

</div>

我正在使用的 css 目前正在运行

::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
  background-color: green;

  color: white;
  opacity: 1;
}

内森回答的最终结果

Answer 1

Use it this way:

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color: red;
  background-color: green;
}

Stackblitz example