Angular14升级至15后如何保留MDC Input旧样式（无需自定义CSS）

• 启用旧版组件兼容模块
  Angular Material 15专门提供了@angular/material/legacy系列模块，用来保留Angular 14及之前的非MDC组件样式。你只需替换原有Input相关的导入即可，模板代码不用改：

  // 替换前
  // import { MatInputModule, MatFormFieldModule } from '@angular/material/input';
  
  // 替换后
  import { MatLegacyInputModule, MatLegacyFormFieldModule } from '@angular/material/legacy-input';
  

  切换后组件会自动沿用旧版的高度和样式，完全不用调整布局或加自定义CSS。

• 用官方过渡变量临时调整高度
  要是你打算后续慢慢迁移到MDC组件，但现在需要快速恢复旧布局，可以在全局样式文件（比如styles.scss）里添加官方提供的CSS变量，直接覆盖MDC组件的高度：

  :root {
    --mdc-outlined-text-field-container-height: 56px; /* 旧版Input默认高度 */
    --mat-form-field-container-height: 56px;
  }
  

  这个方法不用改组件导入，属于官方支持的过渡方案，不是自定义hack。

• 匹配Form Field的外观设置
  Angular 15的MDC Form Field默认外观和旧版有差异，确保你的mat-form-field设置了和之前一致的appearance属性，比如appearance="legacy"（MDC组件仍支持这个值，会模拟旧版样式）：

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

  用appearance="legacy"能让MDC组件尽可能贴近旧版的视觉风格，包括高度。

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