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