Angular 18中使用Angular Material获取mat-primary颜色失效求解决

问题原因 #

Angular Material 18的默认主题采用CSS变量实现，并未暴露$primary这类Sass调色板变量。你直接调用mat.get-color-from-palette($primary, 300)时，$primary变量未定义，导致函数无法正常工作。

方案1：直接使用CSS变量（无需自定义主题） #

如果不想创建自定义主题，可直接使用Angular Material默认主题提供的CSS变量，对应不同亮度的primary颜色：

/* 对应primary调色板300亮度的颜色 */
background-color: var(--md-ref-palette-primary-300) !important;

常用的primary相关CSS变量还有：

• --md-sys-color-primary：默认primary主色（对应500亮度）
• --md-ref-palette-primary-100 / --md-ref-palette-primary-200 / ... / --md-ref-palette-primary-900：不同亮度的primary颜色

方案2：创建基础自定义主题（继续使用Sass函数） #

若要保留mat.get-color-from-palette的用法，需创建一个基础自定义主题（即使使用默认调色板）：

1. 在全局样式文件（如styles.scss）中定义主题：

@use '@angular/material' as mat;

// 使用Angular Material默认的indigo调色板定义primary
$primary: mat.define-palette(mat.$indigo-palette);
// 定义浅色主题（若需要深色主题可改用mat.define-dark-theme）
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    // 可选：添加accent、warn调色板
    // accent: mat.define-palette(mat.$pink-palette),
    // warn: mat.define-palette(mat.$red-palette)
  )
));

// 注入核心样式和组件主题
@include mat.core();
@include mat.all-component-themes($theme);

2. 在组件样式中使用Sass函数：

@use '@angular/material' as mat;
// 若$primary未全局暴露，需在组件中重新引入定义（或把变量放到全局Sass文件中共享）
$primary: mat.define-palette(mat.$indigo-palette);

background-color: mat.get-color-from-palette($primary, 300) !important;

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