Angular предлагает по умолчанию инкапсуляцию (эмуляцию) стилей.Это означает, что каждый компонент независим, и у вас не будет конфликта между двумя компонентами на одной странице.(если они используют одно и то же имя класса, например).
https://angular.io/guide/component-styles
Из официальной документации Angular:
Просмотр инкапсуляции
Как обсуждалось ранее, стили CSS компонента инкапсулированы в представление компонента и не влияют на остальную часть приложения.
Чтобы контролировать, как происходит эта инкапсуляция для каждого компонента, вы можете установитьрежим инкапсуляции вида в метаданных компонента.Выберите один из следующих режимов:
Инкапсуляция вида ShadowDom использует собственную реализацию теневого DOM браузера (см. Shadow DOM на сайте MDN) для присоединения теневого DOM к элементу хоста компонента, а затемпомещает компонентный вид в этот теневой DOM.Стили компонента включены в теневой DOM.
Инкапсуляция в собственном представлении использует устаревшую версию встроенной реализации теневого DOM браузера - узнайте об изменениях.
Эмулированная инкапсуляция представлений (по умолчанию) имитирует поведение теневого DOM путем предварительной обработки (и переименования) кода CSS, чтобы эффективно охватить CSS для представления компонента.Подробности см. В Приложении 1.
Нет означает, что Angular не просматривает инкапсуляцию.Angular добавляет CSS к глобальным стилям.Обсуждаемые ранее правила определения границ, изоляции и защиты не применяются.По сути, это то же самое, что и вставка стилей компонента в HTML.
Для стилизации элемента, включенного в компонент, (и если эта функция не предоставляется библиотекой компонентов, этоself), тогда у вас есть 2 варианта:
1) Добавить свой стиль в глобальный styles.css
Нет никакой инкапсуляции для стилей, определенных внутри global styles.css
,
В вашем компоненте:
<fa-icon class="my-global-icon" [icon]="faFacebook"></fa-icon>
В вашем styles.css
или styles.scss
:
fa-icon.my-global-icon path {
fill: red;
}
2) Отключить эмуляцию инкапсуляции
По умолчанию инкапсуляция активна (эмулируется) в стилях, определенных внутри компонента.Чтобы отключить его, вы должны установить encapsulation = ViewEncapsulation.None
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
...
. В этом случае вы сможете стилизовать подэлемент, включенный в прямой дочерний элемент вашего компонента.Но будьте осторожны, вы можете столкнуться с другими проблемами со стилем конфликта.Теперь ваша работа - управлять ими.
Надеюсь, это поможет.