Angular Material v20主题应用疑问：如何为组件配置主题？

Angular Material v20 里**color="primary"/color="accent"/color="warn"这些属性完全保留**，不需要手动创建CSS类，直接沿用旧版本的用法即可，下面给你梳理具体操作和排查点：

• 先确认主题已全局导入
  执行ng add @angular/material后，style.scss（或styles.scss）里应该自动添加了预构建主题的导入语句，比如：

  @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
  

  如果没看到这条代码，手动加上就行——这是主题能全局生效的基础，所有Material组件都会继承这套主题的颜色体系。

• 直接在组件上使用color属性
  对于mat-toolbar、mat-button、mat-card等支持主题色的组件，直接在标签上声明color属性即可，和旧版本用法一致：

  <!-- 示例：设置工具栏为primary主题色 -->
  <mat-toolbar color="primary">
    <span>我的应用工具栏</span>
  </mat-toolbar>
  
  <!-- 示例：设置按钮为accent主题色 -->
  <button mat-raised-button color="accent">提交</button>
  

• 全局统一组件样式（可选）
  如果想让某类组件默认使用主题色，不用逐个加color属性，可以在全局样式里借助Material的颜色函数配置：
  首先需要导入Material的sass工具：

  @use '@angular/material' as mat;
  @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
  

  然后给组件写全局规则：

  /* 让所有mat-toolbar默认使用primary色 */
  .mat-toolbar {
    background-color: mat.get-color-from-palette(mat.$primary-palette);
    color: mat.get-color-from-palette(mat.$primary-palette, default-contrast);
  }
  

• 排查属性不生效的常见原因

  1. 确认对应组件的Module已经导入到你的NgModule中（比如MatToolbarModule、MatButtonModule）；
  2. 检查自定义样式有没有覆盖Material的主题样式（比如自己写的.mat-toolbar背景色优先级更高）；
  3. 确认主题文件路径正确，没有拼写错误。

内容的提问来源于stack exchange，提问作者Max Bündchen