如何为Angular Material复选框设置自定义颜色

Angular Material 提供了更优雅的内置方式来自定义复选框颜色，无需依赖繁琐的 ::ng-deep 和 !important，主要有两种方案：

1. 直接使用 CSS 变量覆盖 #

Angular Material 的 MDC 复选框组件暴露了一系列 CSS 变量，你可以直接在组件样式中通过类名来覆盖这些变量，实现精准的颜色控制：

常用的复选框 CSS 变量： #

• --mdc-checkbox-unselected-icon-color：未选中状态的边框颜色
• --mdc-checkbox-selected-icon-color：选中状态的图标（背景）颜色
• --mdc-checkbox-selected-focus-icon-color：选中且聚焦时的图标颜色
• --mdc-checkbox-label-text-color：复选框的文本颜色

示例代码： #

在组件的 .component.scss 中添加自定义样式：

.custom-colored-checkbox {
  // 未选中时的边框色
  --mdc-checkbox-unselected-icon-color: #666;
  // 选中时的背景/图标色
  --mdc-checkbox-selected-icon-color: #2ecc71;
  // 文本颜色
  --mdc-checkbox-label-text-color: #333;
}

然后在模板中给复选框添加类名：

<mat-checkbox class="custom-colored-checkbox">自定义颜色复选框</mat-checkbox>

这种方式完全不需要破坏视图封装，也无需 !important，是最推荐的局部自定义方案。

2. 自定义 Angular Material 主题（全局统一样式） #

如果需要在整个应用中统一使用自定义颜色的复选框，可以通过扩展 Angular Material 的主题系统来实现：

在全局样式文件（如 styles.scss）中定义自定义主题：

@use '@angular/material' as mat;

// 定义自定义调色板
$custom-checkbox-palette: mat.define-palette(mat.$green-palette, 600);

// 定义自定义主题
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-checkbox-palette,
    // 也可以自定义 accent、warn 调色板
  )
));

// 应用主题到全局
@include mat.core-theme($custom-theme);
@include mat.checkbox-theme($custom-theme);

之后在模板中直接使用 [color]="'primary'" 就能应用你自定义的颜色，这种方式适合全局统一风格的场景。

替代原有 ::ng-deep 的方案 #

如果你暂时需要保留局部样式的修改，也可以通过关闭组件的视图封装来避免 ::ng-deep：

1. 在组件类中设置 encapsulation: ViewEncapsulation.None
2. 给复选框添加唯一类名，然后编写样式：

.unique-checkbox-class .mat-mdc-checkbox-checked .mdc-checkbox__background {
  border-color: #fff;
}

不过这种方式需要注意避免样式污染全局，推荐优先使用前面两种内置方案。

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