настройка вкладки углового материала с использованием класса

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

.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", но это не сработало.

angular css angular-material mat-tab
person Vik    schedule 19.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решение состоит в том, чтобы использовать ::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 в разные классы и используйте их там, где это необходимо.

person bugs    schedule 20.04.2018
comment
что ты имеешь в виду под оберткой? я обычно делаю .my-label {копирую страницу из .mat-label} и использую class=my-label, это то же самое или по-другому? - person Vik; 20.04.2018
comment
да я именно это и имел в виду - person bugs; 20.04.2018
comment
это сложно для вкладок, так как в компоненте вкладок нет прямых элементов, таких как чернильная полоса, которые я могу добавить свой собственный класс - person Vik; 21.04.2018