md-checkbox Angular 材质样式
md-checkbox Angular materials styling
将 Angular 材料与 Angular4 一起使用,我无法在选中后找到更改复选框颜色的方法。
我在初始视图中修改样式的唯一方法是:
:host /deep/ .mat-checkbox-inner-container{
height:15px;
width:15px;
background-color: rgba(0, 255, 0, 0.87);
}
选中后尝试更改样式,但以下操作无效:
:host /deep/ .mat-checkbox-checked {
background-color:yellow;
}
检查后实际应用了,但在错误的元素中 - 未在内部容器中应用。
类似 :host /deep/ .mat-checkbox-inner-container-checked
的东西也不起作用。
欢迎任何帮助。
尝试使用.md-checkbox.md-checked
参考Checkbox Styling,
:host /deep/ .md-checkbox.md-checked .md-icon {
background-color:yellow!important;
}
试试这个:)
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: rgb(27, 142, 241) !important;
}
.mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
尝试将 encapsulation: ViewEncapsulation.None
添加到您的 component.ts 文件
并在 css 中:
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background: yellow;
}
试试这个:)
/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background
{
background-color: rgb(27, 142, 241) !important;
}
/deep/ .mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
这里的/deep/
很重要,否则是行不通的。根据 Angular 文档:
Component styles normally apply only to the HTML in the component's own template.
Use the /deep/
shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.
The /deep/
combinator also has the aliases >>>
, and ::ng-deep
.
— https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
将 Angular 材料与 Angular4 一起使用,我无法在选中后找到更改复选框颜色的方法。
我在初始视图中修改样式的唯一方法是:
:host /deep/ .mat-checkbox-inner-container{
height:15px;
width:15px;
background-color: rgba(0, 255, 0, 0.87);
}
选中后尝试更改样式,但以下操作无效:
:host /deep/ .mat-checkbox-checked {
background-color:yellow;
}
检查后实际应用了,但在错误的元素中 - 未在内部容器中应用。
类似 :host /deep/ .mat-checkbox-inner-container-checked
的东西也不起作用。
欢迎任何帮助。
尝试使用.md-checkbox.md-checked
参考Checkbox Styling,
:host /deep/ .md-checkbox.md-checked .md-icon {
background-color:yellow!important;
}
试试这个:)
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: rgb(27, 142, 241) !important;
}
.mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
尝试将 encapsulation: ViewEncapsulation.None
添加到您的 component.ts 文件
并在 css 中:
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background: yellow;
}
试试这个:)
/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background
{
background-color: rgb(27, 142, 241) !important;
}
/deep/ .mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
这里的/deep/
很重要,否则是行不通的。根据 Angular 文档:
Component styles normally apply only to the HTML in the component's own template.
Use the
/deep/
shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.The
/deep/
combinator also has the aliases>>>
, and::ng-deep
.— https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep