Css 无法更改mat复选框自定义颜色

我正在为我的项目使用角度材质，我想更改mat checkbox的颜色，但不想使用主题化，所以很明显我在我的Chrome浏览器中使用了元素和样式部分，并跟踪mat checkbox使用的类，并发现：“.mat checkbox ripple.mat ripple element”

这是我的代码，我尝试了：：ng deep，/deep/但没有任何这些，结果总是一样的，复选框颜色没有改变，但在“样式”中，我可以清楚地看到它说我已经覆盖了它的颜色

以下是我使用的东西的版本：

"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",

---

如何更改颜色？

使用css来

.mat checkbox background

::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
  background: pink!important;
}

---

ripple

是单击材质组件时显示的水滴涟漪效果的名称，因此您的目标是错误的元素

使用：

---

如果要全局更改颜色，最好使用。

在styles.scss中使用全局scss，这样应该可以

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: black;
}

---

对我来说，在重写表中的样式时，上面的答案在不确定状态下不起作用，但下面的代码起作用

:host ::ng-deep .mat-checkbox-indeterminate,
.mat-checkbox-checked {
    &.mat-primary .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-accent .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-warn .mat-checkbox-background {
        background-color: $ your-color !important;
    }
}

---

这是同样的结果，在“样式”中，它说颜色改变了，但事实并非如此。看看图片，结果完全一样。你看到我的例子了吗：结果还是一样的，因为你的例子和我的项目中的@angular/core和@angular/material版本有很大的不同。你是对的。我画错了元素，在研究“样式”时，我认为我改变了颜色，因为背景和涟漪有相同的颜色。但是您的背景示例不起作用，这最终对我起作用：.mat-checkbox-checked.mat-accent.mat-checkbox-background.mat-checkbox-indeterminate.mat-accent.mat-checkbox-background。谢谢您的回答，它引导我找到了解决方案。@AleksaMilosevic您在评论中发布的css选择器与我在回答中使用的完全相同。您是对的，您的回答似乎不适合我，因为没有！重要的。对不起，弄错了。你的回答是我问题的答案。谢谢：）好的，很高兴我能帮忙。我将添加

！重要的

我的答案只是为了确定，尽管在测试中，我让它在没有重要的的情况下对我有效。

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: black;
}

:host ::ng-deep .mat-checkbox-indeterminate,
.mat-checkbox-checked {
    &.mat-primary .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-accent .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-warn .mat-checkbox-background {
        background-color: $ your-color !important;
    }
}