Нет инкапсуляции в родительском элементе с использованием mix in - Angular - PullRequest
Новая
       7

Нет инкапсуляции в родительском элементе с использованием mix in - Angular

0 голосов
/ 12 февраля 2020

Я пытаюсь использовать микс, чтобы у меня было несколько разных тем на одном сайте.

Я следовал инструкциям, приведенным в следующей статье: https://medium.com/@katiemctigue / как создать темный режим в sass-609f131a3995

Однако, поскольку мой проект использует angular, инкапсуляция мешает, когда я использую следующий миксин. 

@mixin themed() {
@each $theme, $map in $themes {
    .theme--#{$theme} & { 
        $theme-map: () !global;
        @each $key, $submap in $map {
            $value: map-get(map-get($themes, $theme), '#{$key}');
            $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
    }
  }
}

И эта функция 

@function t($key) {
     @return map-get($theme-map, $key);
}

Я хочу стилизовать компонент в зависимости на классе, установленном на элементе тела. Приведенный выше микс возьмет мой css и обеспечит его применение в теме.

Например, если использовать эту строку с css

.layout__body{
     @included themed(){background: t('colour-container-background-dark');}
}

В результате css будет 

.theme--default[_nghost-nrd-c2]  .layout__body[_ngcontent-nrd-c2] {
  background: #EBF1F8; 
}

Что не хорошо, потому что мне нужно убедитесь, что инкапсуляция применяется к .layout__body, но не к .theme - по умолчанию, в настоящее время она применяется к обоим. Поэтому я не хочу инкапсуляции в классе темы, но мне нужно это для всего, что следует за ним.

...