Angular 15中如何正确设置mat-checkbox样式？多种尝试均无效

Angular 15的Material组件已全面切换为MDC（Material Design Components）实现，旧的样式方案可能不再适配，针对你遇到的问题，试试以下可行方案：

一、用正确的MDC选择器提升优先级 #

Angular 15的mat-checkbox类结构和旧版本有差异，直接用mdc-checkbox__background容易因优先级或匹配问题失效，建议结合组件选择器+MDC类，或用更具体的层级选择器：

组件内样式（无需关闭视图封装） #

用::ng-deep穿透组件封装，同时指定目标元素：

::ng-deep .mat-mdc-checkbox .mdc-checkbox__background {
  border-color: #ff0000; /* 修改边框颜色 */
}

::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background {
  background-color: #00ff00; /* 修改选中状态背景色 */
}

全局样式表 #

在styles.css/styles.scss中添加带限定范围的选择器，确保优先级高于默认样式：

app-your-component .mat-mdc-checkbox .mdc-checkbox__background {
  border-width: 2px;
  border-color: #333;
}

app-your-component .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark {
  stroke: #fff; /* 修改勾选图标颜色 */
}

注：app-your-component是你的组件选择器，用来限定样式作用范围，避免全局污染

二、通过自定义主题批量修改样式 #

官方推荐用主题自定义来批量调整Material组件样式，避免直接覆盖MDC类：

1. 在主题文件（如theme.scss）中添加自定义混入：

@use '@angular/material' as mat;

$custom-checkbox-theme: mat.checkbox-theme(
  mat.define-light-theme((
    color: (
      primary: mat.define-palette(mat.$blue-palette),
      accent: mat.define-palette(mat.$pink-palette),
    )
  )),
  (
    background-color: #f0f0f0,
    checked-background-color: mat.get-color-from-palette(mat.$green-palette, 500),
    border-color: mat.get-color-from-palette(mat.$gray-palette, 400),
  )
);

@include mat.checkbox-theme($custom-checkbox-theme);

2. 将主题文件导入全局样式表，确保生效。

三、排查样式失效的常见原因 #

• 打开浏览器控制台Elements面板，检查目标元素的类名是否正确，确认你的样式是否被默认样式覆盖（划掉的样式即优先级不足）
• 确认组件已正确导入MatCheckboxModule，避免因未导入导致样式未加载
• 使用SCSS时，检查嵌套语法是否有误，导致样式编译失败

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