угловой материал не может установить второй параметр в карте - получить пользовательские компоненты - PullRequest
Новая
       14

угловой материал не может установить второй параметр в карте - получить пользовательские компоненты

0 голосов
/ 22 мая 2019

IM, следуя этому руководству по созданию собственного цвета компонента для моих кнопок.

У меня была такая же проблема, как у этого парня: Угловой 2 + Материал: Невозможно использовать map-get со вторым параметром "text", "card" и другими

но его решение не работает. 

@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);

потому что когда я использую первичную переменную вместо первичной палитры, все работает просто отлично, как 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);
...