Angular 14升级至15后Material旧版组件样式缺失求助

针对升级Angular 14到15后，mat-autocomplete和mat-select的面板背景色缺失、选项交互样式异常的问题，可尝试以下解决方案：

• 确保导入完整的Legacy组件主题样式
  Angular 15对Material组件的样式拆分更精细化，仅引入mat.legacy-core()不足以覆盖所有组件的Legacy样式。需在全局样式文件（如styles.scss）中，为受影响的组件单独导入Legacy主题：

  @use '@angular/material' as mat;
  
  // 定义项目主题调色板（可按需调整）
  $primary-palette: mat.define-palette(mat.$blue-palette);
  $accent-palette: mat.define-palette(mat.$amber-palette);
  $warn-palette: mat.define-palette(mat.$red-palette);
  
  // 创建Legacy主题配置
  $app-legacy-theme: mat.define-legacy-theme(
    (
      color: (
        primary: $primary-palette,
        accent: $accent-palette,
        warn: $warn-palette,
      ),
    )
  );
  
  // 全局应用Legacy核心样式
  @include mat.legacy-core($app-legacy-theme);
  
  // 单独导入Autocomplete和Select的Legacy主题样式
  @include mat.legacy-autocomplete-theme($app-legacy-theme);
  @include mat.legacy-select-theme($app-legacy-theme);
  

• 检查组件模块导入是否为纯Legacy版本
  避免同时导入新组件模块和Legacy组件模块，比如不要在同一模块中同时引入MatAutocompleteModule和MatLegacyAutocompleteModule。确保所有相关组件都使用Legacy版本的模块：

  // 正确导入Legacy模块
  import { MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
  import { MatLegacySelectModule } from '@angular/material/legacy-select';
  
  @NgModule({
    imports: [
      MatLegacyAutocompleteModule,
      MatLegacySelectModule
    ]
  })
  export class YourModule { }
  

• 临时手动补全样式（应急方案）
  如果上述方法未生效，可通过自定义CSS强制覆盖缺失的样式：

  // 修复面板背景与容器样式
  .mat-autocomplete-panel, .mat-select-panel {
    background-color: #ffffff; // 替换为项目主题背景色
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }
  
  // 修复选项悬浮与聚焦状态
  .mat-option:hover:not(.mat-option-disabled) {
    background-color: #f5f5f5; // 替换为项目主题hover色
  }
  
  .mat-option.mat-active {
    background-color: rgba(0, 123, 255, 0.1); // 替换为项目主题primary浅色
  }
  

• 清理缓存并重新构建项目
  缓存可能导致样式未正确编译，执行以下命令清理缓存并重新构建：

  ng cache clean
  ng build
  

  或重启Angular开发服务，确保新的样式配置被加载。

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