首页 文章

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

提问于
浏览 次
1

如果我想要设置一个不是材质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，您的应用程序将最终获得这些常见样式的多个副本 .

angular material-design angular-material angular-material2

1 回答

  • 2

    我认为这可以通过将自定义主题拆分为多个文件来解决 . 例如，我有 _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 或您定义的任何其他内容 .

    回复于

相关问题