角材质自定义css答案

【问题标题】：Angular material custom css角材质自定义css
【发布时间】：2021-03-25 20:49:41
【问题描述】：

我要做的是将每个主题的原色放入这样的 css 类中：

.primary-color-app{
    background-color : mat-color($primary, default);
}

.primary-color-dark{
    background-color : mat-color($dark-primary, default);
}

.primary-color-pink{
    background-color : mat-color($pink-primary, default);
}

.primary-color-custom{
    background-color : mat-color($custom-primary, default);
}

这可以毫无问题地编译成 CSS 文件。但是当我尝试通过 css 类访问颜色时，它并没有显示出来。

HTML

<section>
    <div class="box primary-color-app">
        App
    </div>

    <div class="box primary-color-dark">
        Dark
    </div>

    <div class="box primary-color-pink">
        Pink
    </div>

    <div class="box primary-color-custom">
        Custom
    </div>
</section>

它们应该显示在这里

使用浏览器检查器我意识到了这一点

它表示该属性的值无效。为什么？

【问题讨论】：

请添加已编译 CSS的相关部分
其他浏览器是否也会出现这种情况？

标签： javascript angular css sass angular-material

【解决方案1】：

如果您在开发控制台中单击Computado 并搜索background-color，您可以看到覆盖它的背景颜色在哪里。您可以尝试（强制）使用!important 规则覆盖background-color 属性

.primary-color-app{
    background-color : mat-color($primary) !important;
}

阅读更多：CSS The !important Rule

【讨论】：