Как изменить цвет фона вкладок определенного углового материала?

Question

У меня есть компонент, использующий вкладку мат из углового материала 7.

Я хочу изменить цвет фона моих вкладок в зависимости от логического значения моей переменной машинописного текста.

Проблема в том,что я могу применить CSS только ко всем вкладкам с помощью

.mat-tab-label {
  background-color: red;
}

Как создать класс CSS, который я могу применить к определенной вкладке.

У меня есть стандартный компонент.Я попытался использовать инкапсуляцию: ViewEncapsulation.None, но это только позволило мне изменить все вкладки, как указано выше.

HTML:

<mat-tab-group mat-align-tabs="center" dynamicHeight="true">
  <mat-tab label="tab1">
    Hello
  </mat-tab>
  <mat-tab label="tab2">
    Hello2
  </mat-tab>
</mat-tab-group>

Answer 1

Отредактировано: если вы хотите изменить одну вкладку, вы можете использовать входной параметр aria-label.

Вам нужно будет добавить

encapsulation: ViewEncapsulation.None

и использовать определенный CSSселекторы вот так:

HTML:

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
  <mat-tab label="First" [aria-label]=backgroundColorToggle.value> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

CSS:

[aria-label=primary] {
  background-color: blue;
}

[aria-label=accent] {
  background-color: aqua;
}

Пример можно найти здесь

ЕслиВы хотите для всех вкладок:

У вас есть специальный API для него.

Просто используйте свойство backgroundColor следующим образом:

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">

Вы можете найти полный пример здесь