如果禁用，Scss 更改 mat-checkbox 的颜色答案

【问题标题】：Scss change color of mat-checkbox if disabled如果禁用，Scss 更改 mat-checkbox 的颜色
【发布时间】：2019-07-05 10:23:59
【问题描述】：

在我的组件的 scss 文件中，我可以在选中时设置 mat-checkbox 的背景颜色：

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #A5C73C;
}

现在，当复选框被选中但被禁用时，我需要为它们设置不同的颜色（必须始终选中某些数据并禁用它们的复选框以防止取消选中）。如何在 scss 中使用 /deep/ 指定 disabled 属性？

【问题讨论】：

标签： angular sass

【解决方案1】：

Usr's answer 让我走上了正轨，但 /deep/ 对我不起作用，所以我不得不更改它以使用 ::ng-deep 伪类。请注意，根据the documentation，这将使样式全局化。另外，就我而言，我必须使用!important 才能使样式生效。

::ng-deep.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #ccc !important;
}

【讨论】：

【解决方案2】：

我认为这应该可行：

/deep/.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: (your color);
}

【讨论】：

【解决方案3】：

这对我有用：

<mat-checkbox class="my_checkbox" [disabled]="true" [checked]="true"></mat-checkbox>

<mat-checkbox class="my_checkbox" [disabled]="true" [checked]="false"></mat-checkbox>

以及未选中和选中的scss：

my_checkbox {
  :not(.mat-checkbox-checked) {
    .mat-checkbox-frame {
      // Your style
    }
  }
  
  &.mat-checkbox-checked {
    .mat-checkbox-frame {
      // Your style
    }

【讨论】：