更改所选 MatCheckbox 的颜色

Question

当一个材质复选框被选中时，我需要更改它的颜色。

我需要反转颜色，所以我已经改变了框架：

mat-checkbox.inverted-checkbox .mat-checkbox-frame {
   border-color: white!important;
}

但是现在我需要将选中的复选框的背景设置为白色，内部的标记为蓝色。

我尝试：

 mat-checkbox.inverted-checkbox .mat-checkbox-checked.mat-accent .mat-checkbox-
    background {
      background-color: white!important;
    }

但是没用

这是复选框

 <mat-checkbox class="inverted-checkbox"></mat-checkbox>

您可以在这里找到示例： https://stackblitz.com/edit/angular-focghc

Answer 1

如果您进入 .mat-checkbox-background 内部，您会看到复选图标是一个路径元素，它的颜色是由笔划设置的：#fafafa!important; CSS 属性。