Angular Material中如何为不确定状态复选框添加样式？

内置CSS类 #

Angular Material的MDC版复选框（mat-mdc-checkbox）在不确定状态时，会自动给根元素添加mat-mdc-checkbox-indeterminate这个专属内置类，你可以直接用这个类编写样式，无需修改任何模板：

.mat-mdc-checkbox-indeterminate .mdc-checkbox__background {
  /* 自定义不确定状态样式示例 */
  background-color: #ff9800;
}

备选CSS属性选择器方案 #

如果不想依赖类名，还可以利用复选框在不确定状态下的aria-checked="mixed"属性定位元素：

.mat-mdc-checkbox[aria-checked="mixed"] .mdc-checkbox__background {
  /* 自定义不确定状态样式示例 */
  border-color: #ff9800;
}

以上两种方式都不需要修改现有模板，直接通过全局或组件级CSS就能实现不确定状态的独特样式。

内容的提问来源于stack exchange，提问作者ineedtoknow