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);

我可以在theme.scss中导入component.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或您定义的任何其他内容。

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

1 个答案: