md 复选框 角度材质样式

Question

将角度材质与 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这样的东西也不起作用。

欢迎任何帮助。

Answer 1

试试这个:)

.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;
}

Answer 2

试试这个:)

/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 文档：

组件

样式通常仅适用于组件自己的模板中的 HTML。

使用/deep/阴影穿孔后代组合器强制样式通过子组件树向下进入所有子组件视图。/deep/组合器适用于嵌套组件的任何深度，它适用于组件的视图子项和内容子项。

/deep/组合器也有别名>>>和::ng-deep。

— https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 3

尝试使用.md-checkbox.md-checked参考复选框样式，

:host /deep/ .md-checkbox.md-checked .md-icon {
   background-color:yellow!important;   
}

Answer 4

尝试将encapsulation: ViewEncapsulation.None添加到 component.ts 文件中

在 CSS 中：

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background: yellow;
}