升级Angular/Material 15后复选框与标签错位，如何修复？

• 确保密度混合器正确配置
  密度设置不生效通常是因为混合器调用顺序错误，必须在主题初始化完成后使用。修改你的自定义主题文件（如theme.scss）：

  @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),
    density: -1 // 覆盖默认密度值
  ));
  
  // 应用所有组件主题样式
  @include mat.all-component-themes($theme);
  
  // 若需单独调整复选框密度，需放在主题应用之后
  // @include mat.checkbox-density(-1);
  

  同时确认angular.json的styles数组中，引用的是你的自定义主题文件，而非Material预构建的styles.css。

• 强制CSS对齐修复
  如果密度调整无效，直接通过自定义CSS修正垂直对齐：

  /* 在全局样式或组件样式中添加 */
  mat-checkbox {
    display: inline-flex;
    align-items: center;
  
    .mdc-checkbox {
      margin-top: 0; /* 移除默认顶部外边距 */
    }
  }
  

  若不想全局生效，可给特定复选框加类名：

  <mat-checkbox class="aligned-checkbox">标签文本</mat-checkbox>
  

  .aligned-checkbox {
    display: flex;
    align-items: center;
  
    .mdc-checkbox {
      margin-top: 0;
    }
  }
  

• 排查全局样式冲突
  检查项目全局CSS中是否存在对label、input或.mat-checkbox相关元素的line-height、margin、display属性设置，这些规则可能覆盖Material的默认布局样式。比如全局设置label { display: block; }会直接导致标签换行错位。

• 确认组件结构正确
  确保标签内容直接嵌套在mat-checkbox组件内部，不要额外添加无意义的层级：

  <!-- 正确写法 -->
  <mat-checkbox>对齐正常的标签</mat-checkbox>
  
  <!-- 错误写法（易导致错位） -->
  <div>
    <mat-checkbox></mat-checkbox>
    <span>标签文本</span>
  </div>
  

内容的提问来源于stack exchange，提问作者Mitulát báti