Angular Material 18 color属性失效，M3主题配置求助

根据你的代码和截图，问题大概率是未启用M3颜色系统，以及缺少M3核心配置，以下是修正步骤：

1. 启用M3颜色系统与核心支持 #

在定义主题时，需要明确指定使用M3颜色体系，同时启用M3核心样式支持：

@use "@angular/material" as mat;

// 启用M3核心样式支持
@include mat.core($m3: true);

$test-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      system: m3, // 关键：启用M3颜色系统
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
    // 可选：启用M3字体变量，保证字体样式匹配M3规范
    typography: (
      config: mat.define-typography-config(
        css-vars: true
      )
    )
  )
);

:root {
  @include mat.all-component-themes($test-theme);
}

2. 清理无用导入 #

你的代码中@use "m3-theme";如果不是自定义的主题文件，属于多余导入，建议删除，避免路径错误干扰样式渲染。

3. 确认Angular Material版本 #

M3从Angular Material 15.x版本开始支持，16+版本适配更完善，先确认项目版本：

ng list @angular/material

如果版本过低，执行升级命令：

ng update @angular/material

4. 验证全局样式顺序 #

在angular.json的styles数组中，确保主题SCSS文件是第一个引入的全局样式，避免被其他样式覆盖：

"styles": [
  "src/styles.scss", // 你的主题文件放在最前
  "src/other-styles.scss"
]

完成以上步骤后重启开发服务器，M3主题即可正确渲染。

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