Переопределение styles.css в угловом компоненте для навигационной панели Boostrap

Question

Попытка изменить цвет панели навигации приложения при посещении определенной страницы. Панель навигации определена в файле app.component.html, и я пытаюсь переопределить ее в файле css компонента.

app.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

component.css

:host .navbar{
  background-color: orange !important;
}

Ожидается, что navbar изменится на оранжевый при посещении компонента. Компонентом в данном случае является страница в приложении.

Answer 1

Ваш app.component является более высоким компонентом по сравнению с другим созданным компонентом, поэтому позвольте вашему стилю сделать свой app.component.css

Answer 2

Из угловых документов , попробуйте:

:host(.navbar) {
  background-color: orange;
}

Вам не нужна !important часть стиля. Добавление стилей в таблицу стилей, как вы сделали выше, будет очень специфично переопределять их из таблицы стилей начальной загрузки.