Как можно настроить CSS компонента на основе глобального CSS имени класса в Angular? - PullRequest
Новая
       9

Как можно настроить CSS компонента на основе глобального CSS имени класса в Angular?

1 голос
/ 21 февраля 2020

Мы используем класс на html -элементе, чтобы определить, находится ли пользователь в режиме dark или light приложения. 

<html class="dark-mode"></html>

Этот класс добавляется с помощью Renderer2 в сервисе, который обнаруживает выбранные настройки пользователя. Пока все работает нормально.

Теперь нам нужно настроить все компоненты, чтобы они хорошо выглядели и в темном режиме. Но проблема в том, что Angular ViewEncapsulation.

Мы подумали, что это пригодится, просто обновив S CSS компонента: 

.headline {
    color: black;

    .dark-mode & {
      color: white;
    }
}

Или просто CSS: 

.headline {
  color: black;
} 

.dark-mode .headline {
  color: white;
}

Теперь это не работает, потому что класс .dark-mode, как и ожидалось, инкапсулирован.

Как мы можем решить эту проблему?

1 Ответ

1 голос
/ 21 февраля 2020

:host-context обеспечивает доступ к css классам выше :host. Используя :host-context, вы можете проверить, есть ли у какого-либо из родителей хоста определенный класс c css и применить стиль: 

:host-context(.dark-mode) h2 {
  color: white;
}

Документация: https://angular.io/guide/component-styles#host - контекст

...