如何在Angular2的CSS中使用材质主题颜色? [英] How do I use a material theme colors in my css in Angular2?

问题描述

比方说，我需要使用css/sass类将mat-primary颜色用作div的背景，我该如何引用它?我想到了类似的东西:

Let's say I need to use the mat-primary color as a background of a div using a css/sass class, how do i reference it? I thought something like:

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

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

但不幸的是失败了.

推荐答案

您必须首先使用以下主题导入主题

You have to first import the theme with

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

^{参考链接:文档}

这篇关于如何在Angular2的CSS中使用材质主题颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！