未选中时，如何使材质复选框填充为灰色？

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。