CODEWITHSUNDEEP
cssangularangular-material
Eranki
Eranki

Reputation: 807

Overwriting css for angular mat-tab

I wanted to change mat label color for a mat-tab. css that I've added is:

.mat-tab-label {
  min-width: 25px !important;
  padding: 5px;
  background-color: transparent;
  color: white;
  opacity: 1 !important;
  font-weight: 700;
}

It is changing color for tab. But, it is changing color for all mat-tabs in whole application. How can I change for a particular tab alone.

Upvotes: 1

Views: 4601

Answers (2)

Avinash Dalvi
Avinash Dalvi

Reputation: 9321

You have to override class style in style.css or style.scss

.mat-tab-label {
  min-width: 25px !important;
  padding: 10px;
  background-color: transparent;
  color: white;
  opacity: 1 !important;
  font-weight: 700;
}

Stackblitz : https://stackblitz.com/edit/angular-mat-tab-active-89vnui

Upvotes: 1

Mohit Harshan
Mohit Harshan

Reputation: 1996

You can use the component tag label,

 app-component-name .mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: white;
    opacity: 1 !important;
    font-weight: 700;
}

Or add a class to the tab

Upvotes: 1

Related Questions