如何在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);
  }
}

^{參考鏈接： 文檔}