在我自己的组件中使用有角度的材质颜色

Question

如果我想使用主题中定义的颜色为不是材料 2 组件的元素设置样式，那么标准方法是什么？

假设我在组件中有一个h1 标签，我希望颜色是我的primary color。我希望能够做这样的事情：

h1{
  color: $color-primary; 
}

目前我有一个 theme.scss 和 styles.scss

theme.scss：

@import '~@angular/material/theming';
@include mat-core();
$color-primary: mat-palette($mat-blue);
$color-accent:  mat-palette($mat-amber, A400, A200, A500);
$color-warn:    mat-palette($mat-red);
$theme: mat-light-theme($color-primary, $color-accent, $color-warn);
@include angular-material-theme($theme);

我可以在我的component.scss 中导入theme.scss，但是它们是state not to do so：

导入 mat-core() sass mixin。这包括所有常见的样式 由多个组件使用。这应该只包括 一次在您的应用程序中。如果多次包含此 mixin， 您的应用程序最终会得到这些常见的多个副本 样式。

Answer 1

我认为这可以通过将您的自定义主题拆分为多个文件来解决。例如，我有一个_mat-colors.scss 和_mat-theme.scss。 _mat-colors 包含需要的三个颜色变量； _mat-theme 使用 _mat-colors 并且是我定义调色板并包含 mat-core 的地方。然后，您可以拥有一个 _variables 或 _colors 文件并像这样使用它：

@import '@angular/material/theming';
@import './mat-colors';

$color-red: mat-color($my-warn-palette);

然后您可以使用$color-red 或您根据需要定义的任何其他内容。