为 angular mat-tab 覆盖 css

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.

Answer 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

Answer 2

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