Как изменить серый цвет в мат-вкладках и установить черный - PullRequest
Новая
       0

Как изменить серый цвет в мат-вкладках и установить черный

0 голосов
/ 01 ноября 2019

У меня есть mat-tab-group и две mat-tabs. Теперь, когда один из них не активен, он имеет серый цвет. Мне нужно сделать цвет текста на вкладке черный. Но я не могу этого сделать, потому что цвет по-прежнему серый, когда вкладка не активна.

Я пробовал ::ng-deep и :host и !important, но вкладки по-прежнему серые.

1 Ответ

0 голосов
/ 01 ноября 2019

Я не рекомендую использовать ng-deep, поскольку он устарел:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Вместо этого следует оформить его в виде угловых материалов:

https://material.angular.io/guide/theming

Поскольку у вас, вероятно, будет много пользовательских стилей для ваших компонентов материала, это лучший подход, и вы можете централизовать все пользовательские стили материала в одном файле scss, если хотите.

Пример реализации (не проверено, но должно работать):

my-custom-elements.scss 

@import '~@angular/material/theming';

@mixin custom-tabs-theme() {
   // First tab
  .mat-tab-label.nth-child(1)  {
    background-color: red;
  }
   // Second tab
  .mat-tab-label.nth-child(2)  {
    background-color: red;
  }
   // All tabs
  .mat-tab-label  {
    background-color: red;
  }
}

global-material-theme.scss 

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-tabs-theme();
angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Примечание. Таким способом вы можете редактировать любой класс css материала.

Примечание: это изменит стиль для всех вкладок в приложении, если вам нужен другой подход, вам нужно манипулировать с помощью классав элементе mat-tab-group и получите доступ к 

...
.your-class .mat-tab-header .mat-tab-label-container 
.mat-tab-labels .mat-tab-label.nth-child(1)
...
...