代码之家 › 专栏 › 技术社区 › David S.

如何在Angular Material应用程序中使用非mat元素的原色?

angular-material sass angular

0

David S. · 技术社区 · 6 年前

我找到了很多关于如何定义你自己的角度材料主题的指南。但我只想在一个普通的HTML元素上使用当前主题的“primary color”。

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

我不想经历地狱定义调色板和颜色变量。我只想得到Angular使用的值。

2 回复 | 直到 6 年前

1

0

David S. 6 年前

根据这两个错误,文件是不准确的。最新版本的 document 对我有用。

2

-2

Avin Kavish 6 年前

你不需要一个自定义调色板,但你需要一个自定义的主题和变量来做到这一点。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);
}

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

编辑:你可以用一个预先构建的主题来做,但是你必须经历与上面类似的步骤。但是以上这些让你可以根据自己的喜好灵活地改变颜色。

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