Material 2 中的自定义主题返回： `map-get($map, $key)` 的参数 `$map` 必须是地图答案

【问题标题】：Custom theme in Material 2 returns: Argument `$map` of `map-get($map, $key)` must be a mapMaterial 2 中的自定义主题返回： `map-get($map, $key)` 的参数 `$map` 必须是地图
【发布时间】：2018-06-15 14:17:01
【问题描述】：

我在为 Angular 2 Material 实现自定义主题时遇到了很多困难。我一直在关注以下指南：

并为我的颜色生成了自定义调色板。例如我的“主要”颜色：

$dz-primary: (
    50 : #e8ebee,
    100 : #c6cdd4,
    200 : #a0acb7,
    300 : #7a8a9a,
    400 : #5e7184,
    500 : #41586e,
    600 : #3b5066,
    700 : #32475b,
    800 : #2a3d51,
    900 : #1c2d3f,
    A100 : #82baff,
    A200 : #4f9eff,
    A400 : #1c83ff,
    A700 : #0275ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

当我尝试创建自定义主题时：

@import '~@angular/material/theming';
@include mat-core();

@import './theme/dz-primary';
@import './theme/dz-accent';

$dz-theme-primary: mat-pallete($dz-primary);
$dz-theme-accent: mat-pallete($dz-accent);
$dz-theme: mat-light-theme($dz-theme-primary, $dz-theme-accent);

@include angular-material-theme($dz-theme);

编译器总是返回：

map-get($map, $key) 的参数 $map 必须是地图

回溯： node_modules/@angular/material/_theming.scss:1118，在函数map-get node_modules/@angular/material/_theming.scss:1118，在函数mat-color node_modules/@angular/material/_theming.scss:1530，在 mixin mat-option-theme node_modules/@angular/material/_theming.scss:3854，在 mixin mat-core-theme node_modules/@angular/material/_theming.scss:3920，在 mixin angular-material-theme 标准输入：11 在 C:\Users\Brandon\work\angular-apps\dz-ui\node_modules\@angular\material_theming.scss （第 1118 行，第 11 列）

这似乎是mat-color() 函数不接受调色板的问题，但我似乎找不到问题所在。

我也尝试过使用教程中提到的 Material 中的内置颜色，但我收到了同样的错误。

【问题讨论】：

标签： sass angular-material2

【解决方案1】：

您将mat-palette 拼写为mat-pallete。

$dz-theme-primary: mat-palette($dz-primary); // <- Here
$dz-theme-accent: mat-palette($dz-accent); // <- Here
$dz-theme: mat-light-theme($dz-theme-primary, $dz-theme-accent);

【讨论】：

哦。我的。上帝。谢谢你。我现在羞愧地低下了头。

【解决方案2】：

我认为您缺少 mat-pallete 中的第二个参数（颜色值）。

$dz-theme-primary: mat-pallete($dz-primary,100);

【讨论】：

我已经浪费了相当多的时间来解决这个问题......我想我会切换回 Bootstrap 并收工。不过，我仍然想知道为什么会失败。
其实指定第二个参数是可选的。