Angular Material v15升级：Legacy按钮主题未生效问题求助

要让Legacy组件正常应用自定义主题，你需要调整自定义主题的SCSS代码，使用Angular Material提供的Legacy主题mixins——因为v15默认的主题工具只针对新的MDC组件。

具体步骤： #

1. 修改自定义主题SCSS文件
   在你的主题文件（通常是src/styles.scss或单独的主题文件）中，替换原有的MDC主题mixins为Legacy版本：

   // 导入Legacy主题工具，替代原有的@angular/material
   @use '@angular/material/legacy-theming' as mat;
   
   // 自定义调色板定义保持不变
   $primary: mat.define-palette(mat.$indigo-palette);
   $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
   $warn: mat.define-palette(mat.$red-palette);
   
   // 定义Legacy主题
   $theme: mat.define-light-theme((
     color: (
       primary: $primary,
       accent: $accent,
       warn: $warn,
     )
   ));
   
   // 应用Legacy组件的主题样式
   @include mat.legacy-all-component-themes($theme);
   

2. 确认模块导入正确
   确保你在material.module.ts中导入的是Legacy版本的组件模块，比如：

   import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
   

   （迁移工具自动完成的导入通常是正确的，这一步主要是二次验证）

3. 验证主题生效
   重新启动应用后，Legacy组件（如带mat-button类的按钮）应该会正确应用你的自定义主题样式。

补充说明： #

• 如果之后需要逐步迁移到MDC组件，可以同时在主题文件中兼容两种组件的主题，只需同时导入MDC和Legacy的主题工具，分别应用对应的组件主题mixins即可。
• Legacy组件是Angular Material为升级提供的过渡方案，后续版本会逐步移除，建议在业务空闲期逐步替换CSS选择器为新的mdc-*类名。

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