Overwriting css for angular mat-tab

Question

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.

if you are setting the style for the tab in the global style.css or scss it will be change for all. You need to add a file for isolate into the component where you want to use that style. — anthony willis muñoz
– anthony willis muñoz, Commented Jul 9, 2020 at 8:46
I added css to individual component. But, it is reflecting on all — Eranki
– Eranki, Commented Jul 9, 2020 at 8:54
I moved to style.css and added component as prefix to .mat-tab-label. That fixed the issue. — Eranki
– Eranki, Commented Jul 9, 2020 at 10:05

Mohit Harshan · Accepted Answer · 2020-07-09 08:47:29Z

1

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

answered Jul 9, 2020 at 8:47

Mohit Harshan

1,9961 gold badge23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avinash Dalvi · Accepted Answer · 2020-07-09 08:51:05Z

1

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

answered Jul 9, 2020 at 8:51

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

Collectives™ on Stack Overflow

Overwriting css for angular mat-tab

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related