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

Question

我在项目中使用的是Angular Material，但我想更改mat-checkbox的颜色，但不想使用主题，因此，我在Chrome浏览器中显然使用了Elements和Styles部分，并跟踪了mat-checkbox使用并找到的类此：“。mat-checkbox-ripple .mat-ripple-element”。

::ng-deep .mat-checkbox-ripple .mat-ripple-element {
  background-color: black!important;
}

因此，这是我的代码，我尝试了:: 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",

如何更改颜色？

Answer 1

ripple 是单击“材料”组件时显示的水滴波纹效果的名称，因此您定位的元素错误。

使用：

// overwrite the checkbox background
::ng-deep .mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: black !important;
}

// overwrite the ripple overlay on hover and click
::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
  background-color: black !important;
}