使用 Angular 2 (4) + Material,我需要自定义组件的主题。我首先尝试使用内置调色板,但不断收到“错误:未定义”。 仅当将“primary”、“accent”或“warn”作为第二个参数传递给map-get 时,它才有效:
styles.scss
@import '~@angular/material/theming';
@include mat-core();
@import 'app/app.component.scss-theme';
$default-theme-primary: mat-palette($mat-light-green);
$default-theme-accent: mat-palette($mat-indigo);
$default-theme-warn: mat-palette($mat-red);
$default-theme: mat-light-theme($default-theme-primary, $default-theme-accent, $default-theme-warn);
@include angular-material-theme($default-theme);
@include app-component-theme($default-theme);
app.component.scss-theme.scss
@import '~@angular/material/theming';
@mixin app-component-theme($theme){
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$text: map-get($theme, text);
$card: map-get($theme, card);
$lighter: map-get($theme, lighter);
$darker: map-get($theme, darker);
.test{
font-size: 5em;
color: mat-color($primary)!important; // works
// color: mat-color($darker)!important; // fails
// color: mat-color($lighter)!important; // fails
// color: mat-color($text)!important; // fails
// color: mat-color($card)!important; // fails
}
}
我依靠以下帖子/网址来找到第二个参数接受的可能值的方法,但可以知道出了什么问题。
最佳答案
好的,发现我的错误:
$text: map-get($theme, text);
$card: map-get($theme, card);
$lighter: map-get($theme, lighter);
$darker: map-get($theme, darker);
.test{
font-size: 5em;
color: mat-color($darker)!important; // fails because $darker isn't called on foreground
}
解决方案:“$foreground”和“$background” map 上存在文本、卡片等:
@mixin app-component-theme($theme){
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$text: map-get($foreground, text);
$card: map-get($background, card);
.crap{
font-size: 5em;
color: $text;
background-color: $card;
}
}
关于Angular 2 + Material : Unable to use map-get with 2nd parameter "text", "card"等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46648928/