Angular Material按钮无悬停颜色问题求助

以下是几个排查和解决的步骤：

• 检查BrowserAnimationsModule是否导入
  Angular Material的部分交互视觉反馈依赖动画模块，在根模块（如app.module.ts）中确保导入并加入到imports数组：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      // ...其他模块导入
      BrowserAnimationsModule
    ]
  })
  export class AppModule { }
  

  若无需启用动画，可替换为NoopAnimationsModule，但部分悬停效果仍需依赖动画模块支持。

• 确认主题样式已正确配置
  执行ng add @angular/material时，工具会自动在全局样式文件（如styles.scss）中添加主题代码，检查文件中是否包含预构建主题的导入：

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

  若是自定义主题，需确保存在完整的主题定义代码：

  @import '@angular/material/theming';
  @include mat-core();
  
  $app-primary: mat-palette($mat-indigo);
  $app-accent:  mat-palette($mat-pink, A200, A100, A400);
  $app-warn:    mat-palette($mat-red);
  
  $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
  @include angular-material-theme($app-theme);
  

  若缺失上述代码，手动添加预构建主题的导入语句即可。

• 排查自定义样式冲突
  检查组件样式或全局样式中是否存在覆盖按钮悬停状态的规则，例如：

  button:hover {
    background-color: transparent !important;
    /* 或其他取消背景变化的规则 */
  }
  

  这类自定义样式会覆盖Angular Material的默认悬停效果，需移除或调整样式优先级。

• 验证组件模块导入完整性
  虽然已导入MatButtonModule，但需确认模块未被错误配置（如未加入到当前使用该按钮的组件所属模块的imports中），不过按钮悬停效果本身仅依赖MatButtonModule与主题样式，此点优先级低于前三项。

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