Angular 17中@angular/material-experimental自定义M3调色板报错咨询

错误核心原因是直接传入的颜色映射不符合Material Design 3（M3）调色板的结构要求，M3规定调色板必须通过@angular/material-experimental提供的define-palette函数生成，而非直接使用色阶键值对。

修正后的完整代码如下：

@use "@angular/material" as mat;
@use "@angular/material-experimental" as matx;

// 自定义M3主色调的各个色阶
$primary-tones: (
    0: #000000,
    10: #191027,
    20: #2b1a41,
    25: #3d245c,
    30: #4f2f76,
    35: #9257c5,
    40: #654083,
    50: #79539b,
    60: #9d80b7,
    70: #c1aed3,
    80: #e5dbef,
    90: #e5ddee,
    95: #e9e3ef,
    98: #ebe7ef,
    99: #efecf1,
    100: #ffffff,
);

// 将自定义色阶转换为符合M3规范的调色板
$primary-palette: matx.define-palette($primary-tones);

// 定义完整的M3主题配置
$m3-custom-theme: matx.define-theme((
    color: (
        primary: $primary-palette
    )
));

// 生成最终的浅色主题
$light-theme: matx.define-theme($m3-custom-theme);

html,
body {
    height: 100%;
    @include mat.button-theme($light-theme);
}

关键修正点：

• 使用matx.define-palette处理自定义色阶，生成M3系统认可的调色板结构，该函数会自动补充主题所需的元数据（如默认色态、交互色态等）
• 修正了主题定义时的变量名错误（原代码中matx.define-theme($m3-custom)应为matx.define-theme($m3-custom-theme)）

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