未选中时如何使材料复选框变成灰色？

Question

我正尝试在未选中时用background-color: gray填充Angular Material Checkbox，并在选中时用background-color: red填充。

这是我尝试过的：

mat-checkbox:not(.mat-checkbox-checked) .mat-checkbox-layout .mat-checkbox-background {
  background-color: #C3C3C3;
}

mat-checkbox.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background {
  background-color: red
}

这种方式的工作方式与我预期的一样，但是当我检查/取消检查显示白色背景并且动画似乎效果不佳时。

My stackblitz demonstration

Answer 1

您可以通过导入NoopAnimationsModule（docs）来禁用角材料动画。

例如：

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports: [ NoopAnimationsModule ],
  exports: [
     ...

这里是工作中的Stackblitz。