css - 如何在 CSS3 中更改 mat-checkbox 背景颜色？ Angular 6

Question

我需要用 mat-ripple use class="matCheckboxClass"改变背景

HTML:

<mat-checkbox class="matCheckboxClass"></mat-checkbox>

CSS3:

.matCheckboxClass .mat-checkbox-checked
.mat-accent.mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent 
.mat-checkbox-background {
background-color: rgb(27, 142, 241) !important;
}

.matCheckboxClass .mat-ripple-element  {
 background: rgba(27, 142, 241, .4) !important;
 }

注意:::ng-deep 将更改所有 mat-checkbox 我需要更改特定的 mat-checkbox。

Answer 1

you can try this:

:host /deep/{
    .matCheckboxClass .mat-checkbox-checked
    .mat-accent.mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent 
    .mat-checkbox-background {
    background-color: rgb(27, 142, 241) !important;
}

 .matCheckboxClass .mat-ripple-element  {
     background: rgba(27, 142, 241, .4) !important;
  }
}