温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Styling mat-tab labels -Angular Material
angular angular-material

其他 - 样式垫标签标签-角材料

发布于 2020-09-17 00:52:47

我想弄清楚如何更改mat-tab标签的颜色。我已经遍历了与样式标签相关的所有堆栈溢出帖子,但是没有一种解决方案可以将文本颜色从白色更改为黑色。现在看起来像这样。您甚至看不到非活动标签。 在此处输入图片说明

如何使非活动链接显示为黑色?

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

内森回答的最终结果

最终结果

查看更多

提问者
user6680
被浏览
0
4,857 2019-12-05 15:39

使用这种方式:

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

Stackblitz示例