角度材质自定义css

Question

我想要做的是将每个主题的主要颜色放入这样的 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>

他们应该在这里显示

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

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

Answer 1

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

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

阅读更多： CSS !important 规则