Как настроить Mat-Tabs?

Если вы проверите CSS вкладок mat, вы увидите эти переменные CSS, которые можно настроить.

.mat-primary.mat-mdc-tab-group,.mat-primary.mat-mdc-tab-nav-bar {
    --mdc-tab-indicator-active-indicator-color: #005cbb;
    --mat-tab-header-divider-color: #e0e2ec;
    --mat-tab-header-pagination-icon-color: #1a1b1f;
    --mat-tab-header-inactive-label-text-color: #1a1b1f;
    --mat-tab-header-active-label-text-color: #1a1b1f;
    --mat-tab-header-active-ripple-color: #1a1b1f;
    --mat-tab-header-inactive-ripple-color: #1a1b1f;
    --mat-tab-header-inactive-focus-label-text-color: #1a1b1f;
    --mat-tab-header-inactive-hover-label-text-color: #1a1b1f;
    --mat-tab-header-active-focus-label-text-color: #1a1b1f;
    --mat-tab-header-active-hover-label-text-color: #1a1b1f;
    --mat-tab-header-active-focus-indicator-color: #005cbb;
    --mat-tab-header-active-hover-indicator-color: #005cbb
}

Цвет фона жестко запрограммирован как none в CSS. Я полагаю, что это просто спецификация материала того, как должно быть с прозрачным фоном.

Поэтому, если вам нужны такие настройки, вам следует просто определить глобальные стили для вашего случая, например:

/* default background for all tab headers */
.mdc-tab { 
    background: red;
}

/* override default background for active tabs */
.mdc-tab.mdc-tab--active {
    background: blue;
}

В результате у вас будут красные неактивные вкладки и синие активные вкладки.

обновление:

Для изменения стиля локального компонента есть два способа сделать это.

1. более чистый, но создает глобальный стиль, который поместит ваш CSS-код в основной пакет, а не отложенную загрузку вашего компонента: добавить собственное имя класса в html

<mat-tab-group class = "my-custom-tabs">

добавить глобальные стили:

/* default background for all tab headers */
.my-custom-tabs .mdc-tab { 
    background: red;
}

/* override default background for active tabs */
.my-custom-tabs .mdc-tab.mdc-tab--active {
    background: blue;
}

2. используйте ::ng-deep, это не так чисто, потому что это устаревшая функция. Но, похоже, его никогда не удаляли, потому что многие проекты зависят от этой функции, и иногда ее использование критически важно, чтобы все работало.

В стилях вашего компонента:

:host ::ng-deep {
  .mdc-tab { 
      background: red;
  }
 
  .mdc-tab.mdc-tab--active {
      background: blue;
  }
}