升级Angular后<mat-form-field>尺寸增大的原因及修复方案

问题背景 #

升级至最新Angular版本并执行MDC迁移命令 ng generate @angular/material:mdc-migration 后，出现以下问题：

• 所有<mat-form-field>元素尺寸显著增大，直接设置height属性无效果
• 按钮样式异常已通过添加 letter-spacing: 0px !important 修复，但表单域问题未解决
• 已尝试替换Angular Material类名、移除::ng-deep选择器、修改font-size属性，均未解决尺寸问题

相关代码示例 #

示例HTML代码 #

<mat-form-field appearance="fill">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

迁移工具遗留的TODO CSS代码 #

/* TODO: Migrate these styles to MDC-based classes */
::ng-deep .mat-form-field {
  font-size: 14px;
  height: 48px;
}

可行解决方向 #

1. 使用官方尺寸控制类
   MDC迁移后，表单域尺寸由专属类管控，无需手动设置height。直接添加官方提供的尺寸类即可缩小表单：

<mat-form-field appearance="fill" class="mat-mdc-form-field-size-small">
  <!-- 表单内容 -->
</mat-form-field>

2. 全局配置表单域密度
   在全局样式文件（如styles.scss）中配置MDC表单域的密度参数，批量调整所有表单的尺寸：

@use '@angular/material' as mat;

$mdc-form-field-density: -2; // 负数取值范围-4至0，数值越小尺寸越小
@include mat.form-field-theme($mdc-form-field-density);

3. 清理冲突样式
   排查全局样式中是否存在旧版Angular Material的残留规则，尤其是针对.mat-form-field或.mat-mdc-form-field-infix的强制height/padding设置，替换为适配MDC的规则：

/* 适配MDC的内边距设置 */
.mat-mdc-form-field-infix {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

4. 校验appearance属性
   确认<mat-form-field>的appearance属性设置为fill或outline，MDC迁移后自定义appearance需重新适配新的DOM结构，避免因样式结构不匹配导致尺寸异常。

效果参考 #

• 升级前：[原尺寸效果截图]
• 迁移后异常：[尺寸增大效果截图]
• 修改font-size后：[调整后效果截图]

内容的提问来源于stack exchange，提问作者Eric M.C.