Как использовать цвета палитры пользовательского интерфейса материала по умолчанию?

Question

Как вы можете использовать цвета по умолчанию, предоставляемые Angular Пользовательский интерфейс материала в вашем sass-файле компонентов?

У меня есть свой собственный компонент отображения информации, и я просто хочу установить цвета компонента на любое текущие основные и акцентирующие цвета, однако все, что я нахожу, относится к «тематике», и я не хочу к теме. Я просто хочу использовать существующие цвета в комплекте?

Я использую самую последнюю версию Angular 9.

Answer 1

При использовании Материала 2 или выше, может быть немного сложно понять, как использовать цвета $ primary, $ accent и $ warn в файлах Sass ваших компонентов. Это самый простой способ, который я нашел:

Создайте стандартный файл стилей (variables.sass для примера в основной папке):

// Import material theming functions
@import '~@angular/material/theming'

// Copy the palettes from your selected theme (usually theme.sass).
$app-primary: mat-palette($mat-grey)
$app-accent:  mat-palette($mat-light-blue)
$app-warn:    mat-palette($mat-pink)

// Create your Sass color vars (will be available in all the project)
$primary: mat-color($app-primary)
$accent: mat-color($app-accent)
$warn: mat-color($app-warn)

в your.component.scss:

// Import variables.sass to the component's sass file where you want to use it.
@import "~variables.sass"
.selected 
  background-color: $accent

Не забудьте включить тему.s css в файл .angular-cli.json:

{
...
  "apps": [{
  ...
  "styles": ["_variables.scss"]
  }]
  ...
}