我想弄清楚如何更改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;
}
内森回答的最终结果
使用这种方式:
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color: red;
background-color: green;
}
请记住,不建议使用ng-deep。