未选中时如何使 material 复选框填充为灰色？

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
}

这种方法和我预期的一样有效，但是当我 check/descheck 显示白色背景时，动画效果似乎不太好。

My stackblitz demonstration

Answer 1

您可以通过导入 NoopAnimationsModule (docs) 来禁用 angular 材质动画。

例如：

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

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

这是一个有效的 Stackblitz。