Question

IM遵循本指南为我的按钮创建自定义组件颜色。

ive与这个人有同样的问题： Angular 2 + Material: Unable to use map-get with 2nd parameter "text", "card" and others

但是他的解决方案不起作用。

@import '~@angular/material/theming';


@include mat-core();


$bv-brand : (
  50: #e0f3ed,
  100:#b3e0d1,
  200:#80ccb3,
  300:#4db894,
  400:#26a87d,
  500:#009966,
  600:#00915e,
  700: #008653,
  800: #007c49,
  900: #006b38,
  A100: #9affc6,
  A200: #67ffaa,
  A400: #34ff8d,
  A700: #1aff7f,
  contrast: (
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A700: white,
)
    );


$brand-orange: (
  50: #fef3e4,
  100: #fde0bb,
  200: #fccc8e,
  300: #fab861,
  400: #f9a83f,
  500: #f8991d,
  600: #f7911a,
  700: #f68615,
  800: #f57c11,
  900: #f36b0a,
  A100: #ffffff,
  A200: #fff1e9,
  A400: #ffd1b6,
  A700: #ffc19c,
  contrast: (
          500: white,
          600: white,
          700: white,
          800: white,
          900: white,
          A700: white,
  )
);

// mandatory stuff for theming
$primary-palette: mat-palette($bv-brand);
$accent-palette:  mat-palette($brand-orange);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

// include the custom theme components into a theme object
$app-theme: mat-light-theme($primary-palette, $accent-palette);



@mixin mix-app-theme($app-theme) {

  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);


  $bv-brand : map-get($app-theme,primary-palette);

  .mat-button-toggle {
    background-color: mat-color($bv-brand);
    color: mat-color($bv-brand, default-contrast);
  }

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// include the custom theme object into the angular material theme
@include angular-material-theme($app-theme);
// Include the mixin
@include mix-app-theme($app-theme);

我在下面收到此错误：

  Argument `$map` of `map-get($map, $key)` must be a map

问题在以下一行：

  $bv-brand : map-get($app-theme,primary-palette);

因为当我使用主variabel而不是主调色板时，每个都可以正常工作，就像map-get不接受我的新变量一样。我尝试像这样添加前景：

  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  $foreground: map-get($app-theme, foreground); <--ADDED HERE
  $background: map-get($app-theme, background); <-- ADDED HERE

  $bv-brand : map-get($foreground,primary-palette);

Answer 1

也许我有点晚了，但是您的问题是您必须添加“ $”。

示例：

$bv-brand : map-get($app-theme, $primary-palette);

希望对您有帮助。

角形材质无法在map-get自定义组件中设置第二个参数

1 个答案: