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

时间:2020-07-21 17:11:00

标签: angular angular-material material-design angular-animations

我正尝试在未选中时用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

1 个答案:

答案 0 :(得分:1)

您可以通过导入NoopAnimationsModuledocs)来禁用角材料动画。

例如:

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

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

这里是工作中的Stackblitz