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

【问题标题】：How to style a mat-checkbox properly如何正确设置 mat-checkbox 的样式
【发布时间】：2022-04-11 15:02:55
【问题描述】：

我正在尝试根据以下要求设置 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
}

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

【问题讨论】：

标签： css angular typescript angular-material2

【解决方案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;
}

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

【讨论】：

【解决方案2】：

您可以像下面的示例一样使用 ::ng-deep。

::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
   border: 0px;
}

【讨论】：

删除边框。这与我需要的相反。
ok 比使用下面的例子 /** 这个例子没有 CSS */ ::ng-deep .mat-checkbox .mat-checkbox-frame { 边框颜色：紫罗兰色; } ::ng-deep .mat-checkbox-checked .mat-checkbox-background { background-color: darkcyan !important; }
它确实允许我设置背景颜色和边框，虽然不是选中框时边框消失的问题。

【解决方案3】：

把它放在你的 style.css 文件中，我将 bg 颜色保持为红色，但你可以相应地更改：

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #d71e2b;
}

【讨论】：

【解决方案4】：

为未选中的框设置样式：

.mat-checkbox-background{
    background-color: transparent;
    svg path{
        fill: transparent;
    }
    .mat-checkbox-checkmark-path {
         stroke:transparent;
         //stroke is the checked mark only
        }
}

为选中的框设置样式：

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: #2cc3f8 !important;
    svg path {
        fill: #2cc3f8 !important;
    }
}

【讨论】：

【解决方案5】：

我可能会迟到但尝试使用这个=，根据你做一些改变

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;

}

【讨论】：

【解决方案6】：

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: #fa3131;
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
    background-color: #fa3131 !important;
}

【讨论】：

【解决方案7】：

这对我有用：

::ng-deep .mat-checkbox {
  margin-right: 8px !important;
}

【讨论】：

【解决方案8】：

要设置复选框的样式，这对我有用：

mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
    /* MY STYLES HERE */
}

我把它放在全局styles.css的底部，用!important装饰了各种样式

【讨论】：