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

Question

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

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

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

但不幸的是失败了。

Answer 1

您必须先使用

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

然后，您必须定义一个混合

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

^{参考链接： 文档}