Как использовать основной цвет на нематическом элементе в приложении Angular Material?

Question

Я нашел много руководств, говорящих о том, как определить свою собственную тему Angular Material.Но все, что я хочу, это использовать «основной цвет» текущей темы для обычного HTML-элемента.

Что-то вроде:

<div style="color: primary-color">OK</div>

Я не хочу идти в адопределить палитру и цветовую переменную.Я просто хочу получить значение, которое использует Angular.

Answer 1

Согласно этим двум ошибкам, документ был неточным.У меня работает последняя версия документа .

• https://github.com/angular/material2/issues/13476
• https://github.com/angular/material2/issues/5152

Answer 2

Вам не нужна настраиваемая палитра, но для этого вам понадобится настраиваемая тема и переменные.Angular Material предоставляет функцию sass для извлечения цвета из темы, но для этого тема должна быть sass темой, вы не можете сделать это с предварительно скомпилированными темами, так как они находятся в static css:

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

@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent : mat-palette($mat-pink, A200, A100, A400);
$app-warn : mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

.custom-class {
  color: mat-color($app-primary);
}

и в представлении HTML:

<div class="custom-class">OK</div>

Редактировать: Вы можете сделать это с помощью предварительно созданной темы, но вам придется выполнить то же количество шагов, что и выше.Но вышесказанное дает вам возможность менять цвета по своему усмотрению.

https://material.angular.io/guide/theming-your-components