Angular Material v15升级后Form-Field（outline样式）标签被截断问题

问题说明 #

• 升级至Angular Material v15后，appearance="outline"的Form-Field组件标签会间歇性被截断，触发条件与上方元素的边距/内边距设置相关。
• 效果对比：
  • 升级后截断效果：
  • 升级前正常效果：
• 版本差异根源：v15调整了组件的边距规则，新旧版本边距对比：
  • v15边距：
  • v14边距：
• 该问题具有普遍性，可在独立示例环境中复现。

可行修复方案 #

1. 自定义CSS调整内边距 #

通过覆盖默认样式，为标签预留足够显示空间：

/* 针对outline样式的Form-Field，提升输入区域顶部内边距 */
.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
  padding-top: 1.25em !important;
}

/* 或调整Form-Field整体顶部外边距，避免被上方元素挤压 */
.mat-mdc-form-field {
  margin-top: 0.5em !important;
}

2. 引入官方兼容样式（过渡方案） #

Angular Material v15提供了适配旧版边距的兼容样式，可在全局样式文件中引入：

// styles.scss中添加
@import '@angular/material/legacy-prebuilt-themes/indigo-pink.css';

⚠️ 注意：此为过渡方案，长期建议适配v15的新布局规范。

3. 排查父容器布局问题 #

检查Form-Field的父元素是否设置了overflow: hidden或固定高度，这类属性可能导致标签被容器截断，需调整父元素布局规则。

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