如何在 Angular2 的 CSS 中使用材质主题颜色？

【问题标题】：How do I use a material theme colors in my css in Angular2?如何在 Angular2 的 CSS 中使用材质主题颜色？
【发布时间】：2018-07-03 20:09:30
【问题描述】：

假设我需要使用 css/sass 类将 mat-primary 颜色作为 div 的背景，我该如何引用它？我的想法是这样的：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

.a-class{
  background-color: $mat-primary;
}

但惨败。

【问题讨论】：

您可以尝试阅读the documentation.... 这不是粗鲁之类的，而是就在那里。

标签： css angular sass angular-material2

【解决方案1】：

你必须先导入主题

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

然后你必须定义一个像

这样的mixin

@mixin primary-color($theme) {

  $primary: map-get($theme, primary);

  //Then you can use `mat-color` to get the `primary` color
  .a-class {
    background-color: mat-color($primary);
  }
}

^{参考链接：Documentation}

【讨论】：

直接用这个会报错
谢谢你的回答，但如果我把它放在我的.scss 文件中，@mixin 中声明的所有类都不会应用于文档，我无法理解为什么.