Перезапись css для angular mat-tab

Question

Я хотел поменять цвет метки мата на ярлычок мата. css, который я добавил:

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

Он меняет цвет для вкладки. Но он меняет цвет для всех мат-вкладок во всем приложении. Как я могу изменить только для определенной вкладки.

Answer 1

Вы должны переопределить стиль класса в style. css или style.s css

.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

Answer 2

Вы можете использовать метку тега компонента,

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

Или добавить класс на вкладку