Angular Material报错$theme does not exist in your theme config如何修复？

问题本质 #

这个错误的核心原因是主题配置不完整，或是直接修改node_modules内Angular Material源码文件导致的主题变量传递异常。另外，直接修改依赖包内的文件不可取——依赖更新会覆盖你的修改，还容易引发配置冲突。

修复步骤 #

1. 恢复node_modules内的原始文件

先把被修改的_input-theme.scss恢复成官方原始状态，避免本地修改引发后续问题：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

如果使用Yarn：

rm -rf node_modules yarn.lock
yarn install

2. 用正确方式自定义输入框样式

不要直接修改依赖包文件，在项目自有样式文件（比如src/styles.scss或自定义的theme.scss）中通过Angular Material的主题混合器扩展样式：

@use '@angular/material' as mat;

// 1. 定义你的主题（已有主题可跳过）
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

// 2. 全局应用Material主题
@include mat.all-component-themes($my-theme);

// 3. 自定义输入框样式
@include mat.input-theme($my-theme) {
  // 示例：修改输入框光标颜色
  .mat-mdc-input-element {
    caret-color: mat.get-color-from-palette($my-accent, 500);
  }
  // 示例：修改输入框标签颜色
  .mat-mdc-form-field-label {
    color: mat.get-color-from-palette($my-primary, 700);
  }
}

3. 检查主题配置完整性

确保传递给input-theme混合器的$theme变量是通过mat.define-light-theme或mat.define-dark-theme正确定义的，主题对象必须包含color、density或typography等必要配置项。

4. 清理缓存并重新构建

缓存可能导致样式异常残留，执行以下命令清理后重新构建项目：

ng cache clean
ng build --prod

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