CODEWITHSUNDEEP
angularangular-materialnavbar
Matthieu Raynaud de Fitte
Matthieu Raynaud de Fitte

Reputation: 2459

Angular mat-tab-nav-bar how can I change the color of the text?

By doing the following I can change the colour of the text of the tab :

.mat-tab-link {
  color: black;
}

But the text is very slightly transparent witch gives it a grey appearance ( on a white background ) when the tab is not selected. How can I set the transparency / CSS for non selected tabs ?

Upvotes: 1

Views: 2649

Answers (2)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

You can add style inside styles.css.

.mat-tab-link{
  color:#3182ce;
}
.mat-tab-link.mat-tab-label-active{
  color:#ccc;
}

Here is Stackblitz : https://stackblitz.com/edit/angular-mat-tab-nav-qka9gi?file=styles.css

Upvotes: 1

noam steiner
noam steiner

Reputation: 4444

You can find the specific classes combination by looking at the DOM and then specify that, or just do:

.mat-tab-link {
  color: black;
  opacity: 1 !important;
}

You might need to use ::ng-deep

::ng-deep.mat-tab-link {
  color: black;
  opacity: 1 !important;
}

Upvotes: 3

Related Questions