CSS из компонента приложения не работает в приложении Angular

Question

У меня есть два компонента в моем угловом приложении.Компонент приложения и тестовый компонент они.Я написал следующий код в файле css компонента приложения.

label{
 color: red;
}

, но это не отражается на всем приложении.Может ли кто-нибудь помочь мне?

Answer 1

Код CSS, написанный внутри компонента приложения, не будет доступен для другого компонента, даже если он написан внутри компонента приложения.Это из-за инкапсуляции вида и теневого DOM.Каждый селектор CSS получит уникальный селектор из-за эффекта инкапсуляции вида. (Вы можете увидеть это, проверив элемент в браузере.)

Чтобы сделать этот CSS видимым глобально, вы должны добавитьследующий код внутри styleUrls: []

encapsulation: ViewEncapsulation.None

Поведение углового приложения по умолчанию: encapsulation: ViewEncapsulation.Emulated

Помимо None и Emulated, есть еще один вариант.Это Naive.

или

Если вы напишите код CSS внутри файла CSS, представленного вне компонента, он будет доступен глобально.

для получения дополнительной информации: https://angular.io/api/core/ViewEncapsulation

Answer 2

По своему дизайну css для компонентов работает только внутри шаблона их компонентов

Что вы можете сделать для достижения своей цели

1. Напишите свой CSS в глобальных стилях - лучший вариант для вашегона мой взгляд, так как вам нужно применять стиль глобально
2. Use :: ng-deep - простое решение, но не рекомендуется документами (читайте здесь https://angular.io/guide/component-styles)
3. Использовать инкапсуляцию вида -Подробнее читайте здесь https://angular.io/api/core/ViewEncapsulation