我正在为我的元素使用 Angular Material,我想更改 mat-checkbox 的颜色,但不想使用主题,所以很明显我在我的 Chrome 浏览器中使用了元素和样式部分,并跟踪了 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",
如何改变颜色?
最佳答案
ripple
是点击 Material components 时显示的水滴涟漪效果的名称,因此您定位了错误的元素。
使用:
// 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;
}
如果你想全局改变颜色最好使用theming .
关于css - mat-checkbox 自定义颜色无法更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54168627/