Angular Material 15+如何修改复选框边框颜色？

Angular Material 15全面迁移到MDC（Material Design Components）架构后，旧的.mat-checkbox类结构和样式隔离逻辑都发生了变化，所以你原来的::ng-deep + .mat-checkbox-frame写法不再生效。下面是几种可行的解决方案：

1. 自定义主题（官方推荐） #

这是最符合Material设计规范的方式，通过修改主题变量统一控制组件样式，避免硬写CSS选择器。

在你的全局主题文件（比如src/styles.scss）中，添加自定义checkbox的颜色配置：

@use '@angular/material' as mat;

// 定义基础主题
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);

$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  )
));

// 自定义checkbox未选中状态的边框颜色
$custom-checkbox-theme: mat.checkbox-theme($theme, (
  color: (
    unchecked: (
      border: #fa3131,
    )
  )
));

// 应用主题
@include mat.all-component-themes($theme);
@include mat.checkbox-theme($custom-checkbox-theme);

2. 直接覆盖MDC类（局部/全局样式） #

如果主题配置无法满足需求，可以直接针对MDC生成的类写样式，但要注意样式隔离的问题：

方式一：全局样式文件中覆盖 #

在src/styles.scss中添加：

// 未选中状态的checkbox边框
.mdc-checkbox .mdc-checkbox__background .mdc-checkbox__frame {
  border-color: #fa3131 !important; // 需!important提升优先级以覆盖默认样式
}

// 可选：选中状态的勾选图标颜色
.mdc-checkbox--checked .mdc-checkbox__background .mdc-checkbox__checkmark-path {
  stroke: #fa3131;
}

方式二：组件内用::ng-deep打破隔离 #

如果只想在单个组件内生效，可以在组件的样式文件中使用::ng-deep（注：Angular虽不推荐该语法，但目前仍是临时解决局部样式覆盖的可行方案）：

::ng-deep .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__frame {
  border-color: #fa3131;
}

3. 使用组件输入属性（快速预设） #

部分Material组件提供了直接的输入属性修改样式，比如checkbox的color属性可设置为primary/accent/warn，如果这三个预设颜色能满足需求，这是最简单的方式：

<mat-checkbox color="warn">自定义颜色复选框</mat-checkbox>

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