Angular Material v15升级后mat-form-field轮廓样式异常求助

1. 验证主题样式导入 #

确保全局样式文件（如styles.scss）中正确导入Angular Material v15的预构建主题，且无旧版本主题残留或重复导入：

@use '@angular/material' as mat;

@include mat.core();
@include mat.all-component-themes(mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
)));

或者直接导入预构建主题：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

2. 覆盖冲突的轮廓样式 #

Angular Material v15将mat-form-field-outline拆分为start、gap、end三个部分，聚焦时可能因样式计算问题出现多余垂直条。添加以下自定义样式修复：

/* 统一聚焦状态下轮廓各部分的边框宽度 */
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-start,
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-end {
  border-width: 1px !important;
}

/* 移除标签浮动后gap区域的多余垂直边框 */
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-gap {
  border-top: none !important;
  border-bottom: none !important;
}

注意：若使用自定义主题，可调整border-color匹配主题色，尽量避免使用!important，改用组件类前缀提升选择器优先级。

3. 检查全局盒模型设置 #

确保全局样式未修改默认盒模型，Angular Material依赖border-box布局：

* {
  box-sizing: border-box;
}

4. 确认表单字段结构正确性 #

验证mat-form-field的结构符合v15要求，避免嵌套错误：

<mat-form-field appearance="outline">
  <mat-label>示例标签</mat-label>
  <input matInput placeholder="请输入内容">
</mat-form-field>

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