如何在CSS3中更改mat-checkbox背景颜色？ Angular6

Question

我需要使用mat-ripple改变背景使用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;
  }
}