Angular 16升级Angular Material后控制台警告问题求助

这个警告是因为Angular Material 16（MDC迁移后）的主题定义API发生了变化，mat.define-light-theme不再接受$primary、$accent、$warn三个单独参数，而是要求传入一个包含color、typography、density键的配置映射。

你的代码仍使用旧版参数传递方式，因此触发警告。修复步骤如下：

1. 创建颜色配置映射：用mat.define-color-config将三个调色板封装成统一的颜色配置
2. 整合排版配置：将自定义排版或默认排版加入主题配置
3. 生成主题：将完整的配置对象传入mat.define-light-theme

修改后的material.variables.scss代码如下：

@use '@angular/material' as mat;
@include mat.core();

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

// 创建颜色配置
$color-config: mat.define-color-config(
  $primary: $primary,
  $accent: $accent,
  $warn: $warn
);

// 自定义排版配置
/* stylelint-disable function-parentheses-space-inside */
$custom-typography: mat.define-typography-config(
  $font-family: 'Roboto, monospace',
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400)
);
/* stylelint-enable */

// 生成完整的浅色主题（density可选，默认使用0）
$theme: mat.define-light-theme(
  $color: $color-config,
  $typography: $custom-typography,
  // 可选：如果需要自定义密度，取消下面注释
  // $density: mat.define-density-config($scale: -1)
);

$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

// 应用组件主题（会自动包含排版样式，无需单独调用all-component-typographies）
@include mat.all-component-themes($theme);

额外说明：mat.all-component-typographies()无需单独调用，mat.all-component-themes($theme)已经会应用主题内的排版配置，保留可能导致重复样式。

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