Warm tip: This article is reproduced from stackoverflow.com, please click
angular angular-material

Styling mat-tab labels -Angular Material

发布于 2020-08-05 14:15:54

I'm trying to figure out how to change the color of the mat-tab labels. I've gone through every stack overflow post related to styling mat-tabs, but none of the solutions have changed the text color from white to black; Right now it looks like this. You can't even see the non-active tabs. enter image description here

How can I get the non-active links to show up as the color black?

<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 I'm using that's currently working

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

End result of answer by Nathan

End result

Questioner
user6680
Viewed
1.5k
4,857 2019-12-05 15:39

Use it this way:

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

Stackblitz example