覆盖样式.css在 Boostrap 导航栏的角度组件中

Question

尝试在访问某个页面时更改应用程序导航栏的颜色。导航栏是在 app.component.html 文件中定义的，我正在尝试在组件的 css 文件中覆盖它。

app.component.html

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

组件.css

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

访问组件时，预期导航栏将更改为橙色。在本例中，组件是应用中的页面。

Answer 1

从 Angular 文档中，尝试：

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

您不需要样式的!important部分。如上所示，在样式表中添加样式将非常具体地覆盖引导样式表中的样式。

Answer 2

与

创建的其他组件相比，您的 app.component 是一个更高的组件，因此让您的样式在您的 app.component 中完成.css