css - md-checkbox Angular Material 样式

Question

在 Angular4 中使用 Angular Material ，我找不到在选中后更改复选框颜色的方法。

我在初始 View 中修改样式的唯一方法是:

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