Question

使用Angular 2（4）+ Material，我需要自定义组件的主题。我首先尝试使用内置的调色板，但不断得到＆＃34;错误：未定义＆＃34;。只有在传递了map-get＆＃34; primary＆＃34;，＆＃34; accent＆＃34;或者＆＃34;警告＆＃34;作为第二个参数：

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
  }
}

我依靠以下帖子/网址来查找第二个参数接受的可能值，但可能会出现问题。

stack overflow discussion _themes.scss custom theming

Answer 1

好的，发现我的错误：

$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
    }

解决方案：文本，卡片等出现在＆＃34; $前景＆＃34;和＆＃34; $背景＆＃34;地图：

@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：无法使用map-get with 2nd parameter＆＃34; text＆＃34;，＆＃34; card＆＃34;和其他人

1 个答案: