材料 2 中的自定义主题返回:"map-get($map， $key)"的参数"$map&

Question

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

• https://material.angular.io/guide/theming
• https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

并为我的颜色生成了自定义调色板。例如我的"原色"：

$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/材料/_theming.scss：1530，混合mat-option-themenode_modules/@angular/材料/_theming.scss：3854，在混合mat-core-themenode_modules/@angular/material/_theming.scss：3920，在混合angular-material-theme中 标准：11 in C：\Users\Brandon\work\angular-apps\dz-uiode_modules\@angular\material_theming.scss (第 1118 行，第 11 栏)

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

我也尝试使用教程中引用的材质中的内置颜色，但收到相同的错误。

Answer 1

看起来你拼写mat-palettemat-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);

Answer 2

我认为您在 mat-pallete(颜色值)中缺少第二个参数。

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