Angular Material 15版本输入框显示异常问题求助

针对升级到Angular Material 15后outline样式的输入框显示异常问题，可按以下步骤排查解决：

• 确保正确导入主题样式
  Angular Material 15对样式导入方式有调整，推荐通过SCSS自定义主题：
  在项目根目录的styles.scss中添加：

  @use '@angular/material' as mat;
  
  @include mat.core();
  
  // 定义主题色板，可根据需求修改
  $primary-palette: mat.define-palette(mat.$indigo-palette);
  $accent-palette: mat.define-palette(mat.$pink-palette);
  $warn-palette: mat.define-palette(mat.$red-palette);
  
  $light-theme: mat.define-light-theme((
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette,
    )
  ));
  
  @include mat.all-component-themes($light-theme);
  

  若仍使用预构建主题，需在angular.json的styles数组中确认路径正确：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ]
  

• 确认模块导入完整
  在使用输入框的组件所属模块中，必须导入MatFormFieldModule和MatInputModule：

  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  
  @NgModule({
    imports: [
      // 其他模块
      MatFormFieldModule,
      MatInputModule
    ]
  })
  export class YourFeatureModule { }
  

• 清除缓存并重建项目
  缓存可能导致样式加载异常，执行以下命令：

  ng cache clean
  ng serve --open
  

  生产环境则执行：

  ng cache clean
  ng build --prod
  

• 排查自定义样式冲突
  检查项目中是否存在覆盖Angular Material默认样式的自定义代码，尤其是针对.mat-form-field-outline、.mat-input-element等类的样式，避免破坏组件原有布局。

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