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

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

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

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