Измените один точный цвет фона вкладки мат - Angular Материал

Question

Я хочу изменить ОДИН точный цвет фона вкладки мат, есть это решение, которое работает, но немного сложнее, чем нужно.

У меня есть текущий код, который работает, но Я хочу удалить первую кнопку с идентификатором aria-label

HTML:

<div>
  <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup" value="custom">
    <mat-button-toggle value="custom"> custom </mat-button-toggle>
  </mat-button-toggle-group>
</div>

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

CSS:

[aria-label=custom] {
  background-color: #5473a1;
  color: #ffffff;
}

Я бы хотел что-то более простое, но оно не работает:

<mat-tab-group>
  <mat-tab label="First" [aria-label]="custom"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>

Спасибо!

Answer 1

Вот решение, которое я нахожу:

.mat-tab-label-content {
    .my-tab-color {
        &.my-tab-color-green {
            background-color: $mygreen;
            color: white;
        }
    }
}

Answer 2

Это должно быть предназначено для первой вкладки (тела).

.mat-tab-group .mat-tab-body:first-child .mat-tab-body-content{background: red;}