Угловой материал Пользовательский компонент Тематизация

Question

Я пытаюсь использовать цвета из своей пользовательской цветовой палитры в моей пользовательской теме "Угловой материал" для некоторых других компонентов.

Например, div с матовой панелью инструментов и иконкой с полем, которая должна быть заполнена основным цветом фона.

Руководство по угловым материалам о тематике гласит:

Файл темы не следует импортировать в другие файлы SCSS. Это приведет к тому, что дубликаты стилей будут записаны в ваш вывод CSS.

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

Вы можете использовать функции тем и переменные палитры материалов из @ angular / material / theming. Вы можете использовать функцию mat-color, чтобы извлечь определенный цвет из палитры. Например:

// Import theming functions
@import '~@angular/material/theming';
// Import your custom theme
@import 'src/unicorn-app-theme.scss';

// Use mat-color to extract individual colors from a palette as necessary.
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
// For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue.
// Note that quotes are needed when using a numeric hue with the "-contrast" modifier.
// Available color palettes: https://www.google.com/design/spec/style/color.html
.candy-carousel {
  background-color: mat-color($candy-app-primary);
  border-color: mat-color($candy-app-accent, A400);
  color: mat-color($candy-app-primary, '100-contrast');
}

Тема снова импортируется в компонент, где они извлекают цвет с помощью функций из темы материала.

Меня смущает, как правильно использовать цвета на неугловых компонентах материала или компонентах материала события, которые не имеют ввода цвета?

Answer 1

Я описал это в ответе переполнения стека .

Вы должны поместить переменные, относящиеся к теме, и создание темы в отдельных файлах:

• styles/_variables.scss
  • можно импортировать во все файлы scss компонента
  • использует @import '~@angular/material/theming';, чтобы сделать материал доступным для смесей
  • содержит типичные переменные темы, такие как $primary, $accent и $warn
  • содержит одну или несколько $theme переменных (например, через mat-light-theme($primary, $accent, $warn);)

• theme.scss

  • следует не импортировать куда-либо еще

  • включает сердцевину и тему углового материала

    @import 'variables';
    @include mat-core();
    @include angular-material-theme($theme);
    

Чтобы легко импортировать styles/_variables.scss в стили вашего компонента, вам нужно добавить stylePreprocessorOptions в файл angular.json :

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

Теперь вы можете импортировать свои собственные переменные и переменные темы в свой компонент, а также использовать специфичные для материала миксины, такие как mat-color:

@import 'variables';

$background: map-get($theme, background);

.custom-class-a {
  background-color: mat-color($background, card);
  color: mat-color($mat-green, 700);
}