Стили CSS не работают с уже существующим тегом компонента / тела

Question

У меня есть проект в angular 7, я загружаю компонент динамически, используя маршруты, в динамически загружаемую таблицу стилей компонента я добавляю несколько стилей для тега body и уже существующих тегов компонента, и они не отражаются в DOM.

body {
padding-bottom: 150px;
}

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

Answer 1

Если вы определяете стили внутри компонента, они не будут применяться за пределами компонента.

Проверьте мой шаблон StackBlitz .

1. Мои глобальные стили определены в папке scss / для применения всех глобальных стилей вниз в DOM.

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

Так я настраивал свои угловые стили. Дайте мне знать, если вам понадобится дополнительная помощь.

Answer 2

По умолчанию angular применяет только стили внутри компонента, только к элементам HTML в шаблоне этого компонента (просмотр инкапсуляции).Чтобы переопределить это поведение, вы можете установить опцию в директиве компонентов.

Подробнее см. https://angular.io/guide/component-styles#view-encapsulation