Question

我发现很多指南都在讨论如何定义自己的Angular Material主题。但是我只想在普通的HTML元素上使用当前主题的“原色”。

类似的东西：

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

我不想定义任何调色板和颜色变量。我只想获取Angular使用的值。

Answer 1

根据这两个错误，该文档不准确。 document的最新版本对我有用。

Answer 2

您不需要自定义调色板，但是需要自定义主题和变量。 Angular Material提供了一个sass函数来从主题中提取颜色，但是为此，主题必须是sass主题，您无法使用预编译的主题来实现，因为它们在静态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

如何在Angular Material应用中的非抠像元素上使用原色？

2 个答案: