Как использовать пользовательские темы в угловых компонентах - PullRequest
Новая
       33

Как использовать пользовательские темы в угловых компонентах

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

Как я могу использовать основной и акцентный цвет пользовательской темы в моем component.scss?

styles.scss: 

@import './themes';

themes.scss: 


@import 'app/my.component.theme.scss';

@mixin my-components-theme($theme) {
  @include my-component-theme($theme);
  // ...
}

@mixin set-theme($theme) {
  @include angular-material-theme($theme);
  @include container($theme);
  @include flex-container-column();
  @include my-components-theme($theme);
}

// Theme MY Indigo / Red
$my-theme-primary: mat-palette($mat-indigo);
$my-theme-accent:  mat-palette($mat-red);

$my-light-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);

.my-light-theme {
  @include set-theme($my-light-theme);
}

my.component.scss: 

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

@mixin my-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    .test-class {
        background-color: mat-color($primary, 1) !important;
    }
}

Теперь я ожидаю, что в моем компоненте html элемент с классом 'text-class' будет иметь красный цвет фона.Но класс даже не установлен, я не могу проверить его с помощью инструментов Chrome Dev.

...