Angular 16 Material outline样式标签右侧异常边框问题求助

使用Angular 16搭配Angular Material时，给mat-form-field设置appearance="outline"后遇到两个异常：

1. mat-label标签末尾出现多余的右侧边框
2. 输入框获得焦点时，框架自动添加的宽度样式与输入框实际总宽度不匹配

相关代码：

<mat-form-field appearance="outline">
  <mat-label> as you see, the border is related to this label </mat-label>
  <input matInput type="text" placeholder="" [(ngModel)]="user_search.probe" name="probe">
</mat-form-field>

问题截图：

可行的排查与解决步骤 #

• 清理标签前后空格：mat-label内容前后的空格会被计入文本宽度，outline样式的边框是基于标签文本尺寸生成的，多余空格可能导致边框错位。修改标签为：

  <mat-label>as you see, the border is related to this label</mat-label>
  

• 验证全局样式导入：确认全局样式文件（如styles.scss）中正确引入了Angular Material主题，没有主题样式会导致组件渲染错乱：

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

• 排查自定义样式冲突：检查项目中是否有针对mat-form-field、mat-label或mat-input的自定义样式，比如手动设置width、padding、box-sizing等属性，这些都可能干扰组件的默认布局逻辑。
• 升级依赖版本：如果当前Angular Material 16存在已知的渲染bug，尝试升级到同大版本的最新补丁包，这类视觉异常通常会在小版本更新中修复。
• 强制固定宽度：如果焦点时宽度计算异常，可以给mat-form-field设置固定宽度，或者覆盖自动计算的样式：

  mat-form-field {
    width: 100%; /* 或具体数值如320px */
  }
  .mat-form-field-outline {
    width: 100% !important;
  }
  

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