Angular Material 17.2.0中Mat Checkbox与Mat Radio显示异常求助

修复步骤 #

• 确认主题样式导入
  Angular Material组件依赖主题样式支撑布局，若全局样式文件未正确导入主题，会导致组件样式错乱。在styles.scss（或你的全局样式文件）中添加预构建主题：

  @import '@angular/material/prebuilt-themes/indigo-pink.css';
  // 可选其他预构建主题：deeppurple-amber.css、pink-bluegrey.css、purple-green.css
  

  若使用自定义主题，确保@include angular-material-theme($your-theme);已正确配置并全局导入。

• 同步Angular与Material版本
  即使更新了Material，也要确保Angular核心版本与Material版本完全匹配。执行命令同步版本：

  ng update @angular/core @angular/material
  

• 清理缓存并重构项目
  旧缓存可能导致样式残留，执行以下命令重置依赖并重新构建：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  ng build --prod
  

• 排查自定义样式冲突
  检查项目中是否有全局或组件样式修改了transform、position等属性，覆盖了Material组件默认布局。通过浏览器开发者工具查看.mat-checkbox-frame、.mat-radio-container等元素的样式，定位冲突的自定义CSS代码。

问题复现信息 #

• 依赖版本：@angular/material": "17.2.0
• 代码示例：

  <h1>Radio Buttons</h1>
  <mat-radio-group aria-label="Select an option">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
  </mat-radio-group>
  
  <br> <br> <br> <br>
  <h1>Check Boxes</h1>
  
  <section class="example-section">
    <mat-checkbox class="example-margin">Yes</mat-checkbox>
    <mat-checkbox class="example-margin">No</mat-checkbox>
  </section>
  

• 显示效果：
  

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