Tab键聚焦Angular Material的mat-checkbox时无高亮效果如何解决

优先排查版本兼容问题 #

你当前的依赖存在大版本不匹配问题：Angular CLI版本为12.x，对应Angular核心版本应为12.x，但@angular/cdk和@angular/material版本为11.x，跨大版本混用会导致组件样式、交互逻辑异常。
请先对齐依赖版本：

• 卸载旧版依赖：npm uninstall @angular/cdk @angular/material
• 安装匹配你Angular版本的对应依赖：npm install @angular/cdk@12 @angular/material@12

样式问题排查&修复 #

如果版本对齐后问题仍存在，按以下顺序排查：

1. 全局样式覆盖排查 #

检查全局样式文件（styles.scss/styles.css）是否存在以下重置规则：

* {
  outline: none;
}

该规则会覆盖Material组件默认的聚焦轮廓样式，修复方案二选一：

• 移除全局的outline: none规则
• 补充mat-checkbox专属聚焦样式：

/* 恢复默认Material聚焦波纹效果 */
.mat-checkbox-focused .mat-checkbox-ripple .mat-ripple-element {
  opacity: 0.2 !important;
}
/* 或自定义聚焦高亮环 */
.cdk-focused .mat-checkbox-inner-container {
  outline: 2px solid #1976d2 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

2. Material主题引入排查 #

确认你已正确引入Material主题：

• 检查angular.json的build -> options -> styles数组，确认已引入预构建主题：@angular/material/prebuilt-themes/indigo-pink.css
• 若使用自定义主题，确认主题文件中已导入checkbox主题规则：@include mat.checkbox-theme($theme);

3. 焦点属性拦截排查 #

检查mat-checkbox及其父级元素是否存在以下属性：

• cdkIgnoreFocusIndicator：会禁用cdk焦点指示效果
• tabindex="-1"：会拦截元素聚焦
• 父级绑定了(focus)事件并调用了preventDefault()
  移除上述异常配置即可恢复聚焦效果。

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