Настройка вкладки углового материала с помощью класса

Question

Я сделал мою настройку вкладки мат следующим образом

.mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

.mat-tab-link {
    color:white !important;
}

.mat-ink-bar {
    background-color: white !important
}

.mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

вкладка выглядит как

<mat-tab-group>
  <mat-tab label="Sales">
    <div fxLayout="row" fxFlex="100%"> </div>
  </mat-tab>
  <mat-tab label="Service">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

У меня две проблемы:

1. цвет чернил не меняется
2. У меня есть две разные группы вкладок. Я хочу стилизовать их по-другому. Таким образом, с вышеупомянутым решением, это в основном изменяет все компоненты вкладки глобально. Как мне преобразовать их в определенные классы CSS? Я попробовал как .my-label и используя его как class="my-label" но это не работает.

Answer 1

Решением является использование ::ng-deep для переопределения свойств CSS по умолчанию.

Итак, ваш CSS становится:

::ng-deep .mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

:ng-deep .mat-tab-link {
    color:white !important;
}

::ng-deep .mat-ink-bar {
    background-color: white !important
}

ng:deep .mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

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