Angular Material自定义主题导入angular-material-theme混合器报错求助

这个报错我太熟了！本质上是你在调用Angular Material主题混合器时，传入的参数不符合要求——某个本该是Sass map的变量变成了非map类型，导致map-get函数直接炸了。我帮你拆解下常见原因和修复步骤：

1. 先检查主题变量的定义是否规范 #

最常见的错误就是直接用颜色值代替调色板map：

• ❌ 错误示例：直接给变量赋值颜色

  $custom-primary: #ff0000; // 这只是个颜色值，不是Material需要的调色板map
  

• ✅ 正确做法：用mat-palette函数生成合法的调色板map

  // 使用Material内置调色板
  $custom-primary: mat-palette($mat-blue);
  // 或者自定义调色板的深浅色调
  $custom-primary: mat-palette($mat-red, 500, 300, 700);
  

2. 确认angular-material-theme的调用参数 #

调用这个混合器时，必须传入完整的主题map，而不是单个调色板：

• ❌ 错误示例：直接传单个调色板变量

  @include angular-material-theme($custom-primary); // 单个调色板不是完整主题
  

• ✅ 正确流程：先生成完整主题再应用

  // 1. 先导入Material主题文件
  @import '~@angular/material/theming';
  // 2. 必须先调用mat-core()初始化基础样式
  @include mat-core();
  // 3. 定义三个核心调色板
  $custom-primary: mat-palette($mat-blue);
  $custom-accent: mat-palette($mat-pink);
  $custom-warn: mat-palette($mat-red);
  // 4. 生成完整的主题map（浅色或深色）
  $custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
  // 5. 最后应用主题
  @include angular-material-theme($custom-theme);
  

3. 别漏掉mat-core()的调用 #

mat-core()会初始化Material的基础样式和内部变量，如果跳过这一步直接生成主题，很可能导致内部变量未正确定义，进而引发map类型错误。

4. 排查变量名冲突 #

如果你自己定义了和Material内部重名的变量（比如$map），或者不小心覆盖了某个关键主题变量，也可能让map-get拿到非预期的参数。可以临时给自定义变量加个前缀（比如$my-）来测试。

5. 版本兼容性检查 #

如果Angular和Angular Material的版本不匹配，也可能出现这类奇怪的Sass编译错误。建议确认两者版本保持一致（比如Angular 15对应Material 15）。

调试小技巧 #

在调用angular-material-theme之前，用@debug $custom-theme;输出变量，看看控制台里它是不是一个合法的Sass map，这样能快速定位问题根源。

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