作者:傻缺缺的谭贱儿_452 | 来源:互联网 | 2023-01-02 16:08
我在为Angular 2 Material实现自定义主题时遇到很多困难。我一直在遵循以下指南:
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
的map-get($map, $key)
必须是地图
回溯: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
stdin:11在C:\ Users \ Brandon \ work \ angular-apps \ dz-ui \ node_modules \ @angular \ material_theming.scss(第1118行,第11列)
mat-color()
函数不接受调色板似乎是一个问题,但是我似乎找不到问题所在。
我也尝试使用本教程中引用的Material中的内置颜色,但是我收到相同的错误。
1> Edric..:
看起来像您拼写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);
哦。我的 神。谢谢。我现在羞愧地垂下头。