Angular 14升级至15时Material UI主题创建警告问题求助

问题描述 #

我正在将Angular从14版本升级到15版本，同步升级Angular Material后，遇到主题创建警告：提示主题必须从包含color、typography、density键的映射创建，其中color值需为包含primary、accent、warn调色板值的映射。目前尚未找到解决方案，附上相关信息寻求解决方向。

警告详情 #

警告示例：The theme created with define-theme must be a map containing 'color', 'typography', and 'density' keys. The 'color' value must be a map containing 'primary', 'accent', and 'warn' palette values.

package.json 关键依赖片段 #

{
  "dependencies": {
    "@angular/core": "^15.2.0",
    "@angular/material": "^15.2.0",
    "@angular/cdk": "^15.2.0",
    // 其他业务依赖
  },
  "devDependencies": {
    "@angular/cli": "^15.2.0",
    // 其他开发依赖
  }
}

当前主题代码（SCSS） #

@use '@angular/material' as mat;

// 旧的主题定义方式（Angular Material 14及之前）
$my-theme: mat.define-theme(
  mat.define-palette(mat.$indigo-palette),
  mat.define-palette(mat.$pink-palette),
  mat.define-palette(mat.$red-palette)
);

@include mat.all-component-themes($my-theme);

解决方向指引 #

Angular Material 15对主题定义API做了破坏性变更，mat.define-theme不再支持直接传入三个调色板参数，必须传入包含color、typography、density键的配置对象。

修正后的主题代码示例 #

@use '@angular/material' as mat;

// 1. 定义基础调色板
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette);
$warn-palette: mat.define-palette(mat.$red-palette);

// 2. 构建颜色配置对象
$color-config: mat.define-color-config(
  $primary: $primary-palette,
  $accent: $accent-palette,
  $warn: $warn-palette
);

// 3. 定义完整主题（可按需省略typography/density，使用默认值）
$my-theme: mat.define-theme(
  $color: $color-config,
  // 可选：自定义排版，默认使用Material Design规范
  // $typography: mat.define-typography-config(),
  // 可选：自定义组件密度，默认值为0
  // $density: 0
);

@include mat.all-component-themes($my-theme);

额外检查点 #

1. 确保所有样式文件中使用@use '@angular/material' as mat替代旧的@import语法（Angular Material 15已废弃@import，会触发兼容警告）；
2. 若项目中存在自定义组件的主题扩展，需同步更新为新的主题API调用方式，比如mat.get-theme-color($theme, 'primary', '500')这类获取主题色的方法无需变更，但主题传递逻辑需匹配新结构。

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