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

Posted 2023-03-06

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

【英文标题】：How do I use a material theme colors in my css in Angular2?

【发布时间】：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.... 这不是粗鲁之类的，而是就在那里。

【参考方案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 中声明的所有类都不会应用于文档，我无法理解为什么.