Angular Material UI按钮添加mat-button属性后样式不生效是什么原因？

• 缺失MatButtonModule导入
  这是最常见的触发原因，Angular Material的组件功能、样式都依赖对应模块的导入，你需要在应用根模块（AppModule）或当前按钮所在组件的所属模块中导入MatButtonModule，示例代码：

// app.module.ts 或对应特性模块
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // 其他已有导入项
    MatButtonModule
  ]
})
export class AppModule { }

如果你使用的是Angular 14+的独立组件，需要直接在组件的imports配置中添加该模块：

// 按钮所在的独立组件
@Component({
  selector: 'your-component-selector',
  standalone: true,
  imports: [MatButtonModule],
  // 其余组件配置
})

• 主题配置重复冲突
  你的angular.json中已经引入了预构建的indigo-pink主题，同时又通过custom-theme.scss自定义了同色系主题，两者存在冲突，会导致自定义样式被覆盖或不生效，需要删除angular.json styles数组中的./node_modules/@angular/material/prebuilt-themes/indigo-pink.css配置项，仅保留自定义主题的引入即可。
• SCSS语法错误导致样式未编译
  你提供的styles.scss中@use './custom-theme'语句末尾缺少SCSS要求的分号，会触发编译报错，导致自定义主题样式没有正常生成，修改为@use './custom-theme';即可。
• 版本不匹配问题
  如果完成上述配置后仍无效果，检查你的@angular/core、@angular/cli和@angular/material的大版本是否一致，跨大版本使用会出现样式、功能不兼容的问题。

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