Angular项目中Material按钮添加主题后仍显示为普通HTML按钮

• 确认Material模块正确导入
  每个用到的Material组件，都需要在对应模块（AppModule或共享模块）中导入专属的Angular Material模块，并加入imports数组。如果是共享模块，还需导出供其他模块使用。示例代码：

  import { NgModule } from '@angular/core';
  import { MatButtonModule } from '@angular/material/button';
  import { MatDialogModule } from '@angular/material/dialog';
  import { MatFormFieldModule } from '@angular/material/form-field';
  
  @NgModule({
    imports: [
      MatButtonModule,
      MatDialogModule,
      MatFormFieldModule
    ],
    exports: [
      MatButtonModule,
      MatDialogModule,
      MatFormFieldModule
    ]
  })
  export class MaterialModule { }
  

• 检查主题样式加载配置
  确保custom-theme.scss已添加到angular.json的styles数组中，保证全局样式生效：

  "styles": [
    "src/custom-theme.scss"
  ]
  

  也可以直接在项目根目录的styles.scss中导入主题文件，避免路径配置问题。

• 验证Angular Material安装完整性
  若之前手动安装可能遗漏配置，执行ng add @angular/material重新安装，该命令会自动配置主题、动画、字体等必要依赖。同时检查package.json中@angular/material和@angular/cdk的版本是否与Angular核心版本一致。

• 排查样式隔离与优先级问题
  打开浏览器开发者工具，查看组件元素的样式：

  • 若.mat-button等Material专属类无对应CSS规则，说明主题未正确加载；
  • 若规则存在但被覆盖，检查自定义样式的优先级，避免用更高权重的选择器覆盖Material样式。

• 确认动画模块导入
  部分Material组件依赖动画支持，需在AppModule中导入BrowserAnimationsModule：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [BrowserAnimationsModule]
  })
  export class AppModule { }
  

  若无需动画，可替换为NoopAnimationsModule。

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