如何正确设置 mat-checkbox 的样式

Question

我正在尝试根据以下要求设置 mat-checkbox (material2) 的样式：

黑色，始终可见的边框（无论检查状态如何）（#0000000）

选中后，“勾号”将为白色（#ffffff），在彩色（蓝绿色）背景上（边框仍然可见）

未选中时，复选框的背景（边框内）应为灰白色（#dddddd）。

到目前为止，我已经能够设置边框颜色，但是在检查时，它消失了，在蓝绿色的颜色后面

我可以设置未选中的背景颜色，但是当我这样做时，黑色边框再次消失。如果我删除此设置，会出现边框，但背景颜色是错误的。

我设置的scss属性如下：

 ::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: mat-color($darkPrimary, darker); //black
  }

::ng-deep .mat-checkbox-background {
    background-color: mat-color($darkPrimary, 200); //off-white
}

似乎无论我将背景设置为什么，都会覆盖边框样式。此外，当我更改复选框的状态时，黑色边框会短暂出现，然后再次消失。我如何满足这些要求？

原文由 Ian Young 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我意识到角度复选框是分层绘制的，最后绘制的是“刻度”层，位于黑色边框的顶部。

 // Background border
.mat-checkbox .mat-checkbox-frame {
    border-color: black;
    background-color: #dddddd
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    margin-top: 1px;
    margin-left: 1px;
    width: 18px;
    height: 18px;
}

通过减小前层的大小并稍微移动它，边框仍然可见。

原文由 Ian Young 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要在选中时在白色背景上显示蓝色勾号，在未选中时显示白色边框，以下对我有用（知道不推荐使用 ng-deep）：

 :host ::ng-deep {
  .mat-checkbox .mat-checkbox-frame {
        border-color: white !important;
      }

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

    svg path {
      stroke: blue !important;
    }
  }
}

原文由 Dennis 发布，翻译遵循 CC BY-SA 4.0 许可协议