typescript 如何正确设置 mat-checkbox 的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51984326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a mat-checkbox properly
提问by Ian Young
I am attempting to style a mat-checkbox (material2) according to the following requirements:
我正在尝试根据以下要求设置 mat-checkbox (material2) 样式：
A black, always visible border (regardless of checked status) (#0000000)
始终可见的黑色边框（无论检查状态如何）(#0000000)
When checked, the "tick" will be white(#ffffff), on a coloured(teal) background (border still visible)
选中后，“刻度线”将是白色（#ffffff），在彩色（青色）背景上（边框仍然可见）
When unchecked, the background(inside the border) of the checkbox should be off-white (#dddddd).
未选中时，复选框的背景（边框内）应为灰白色 (#dddddd)。
So far, I have been able to set the border color, but when checked, it disappears, behind the teal color
到目前为止，我已经能够设置边框颜色，但是当检查时，它会消失，背后的颜色
I can set the unchecked background color, but again, the black border disappears when I do this. If I remove this setting, the border appears, but the background color is wrong.
我可以设置未选中的背景颜色，但同样，当我这样做时，黑色边框消失了。如果我删除此设置，边框会出现，但背景颜色是错误的。
The scss properties I am setting are as follows:
我设置的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
}
It seems that whatever I set the background as, overwrites the border style. Additionally, when I change the state of the checkbox, the black border briefly appears, then disappears again. How do I fulfil these requirements?
似乎无论我将背景设置为什么，都会覆盖边框样式。此外，当我更改复选框的状态时，黑色边框短暂出现，然后再次消失。我如何满足这些要求？
回答by Ian Young
I realised that angular check-boxes are drawn in layers, with the "tick" layer drawn last, over the top of the black border.
我意识到角度复选框是分层绘制的，最后绘制的“刻度线”层位于黑色边框的顶部。
// 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;
}
By reducing the front layers' size, and shifting it a little, the border remains visible.
通过减小前层的大小并稍微移动它，边框仍然可见。
回答by Flash Noob
i might be late but try using this =, make some changes according to you
我可能会迟到，但请尝试使用此 =，根据您的情况进行一些更改
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;
}
回答by mittal bhatt
You can use ::ng-deeplike below example.
您可以使用::ng-deep如下例所示。
::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
border: 0px;
}
回答by Hiten Sharma
this worked for me:
这对我有用：
::ng-deep .mat-checkbox {
margin-right: 8px !important;
}
回答by Mohit S
Put this in your style.css file, I have kept bg color red but you can change accordingly:
把它放在你的 style.css 文件中，我将 bg 颜色保留为红色，但你可以相应地更改：
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #d71e2b;
}
