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

Question

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

app.component.html

XCUIScreenshot

component.css

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

访问组件时，预期的导航栏将变为橙色。在这种情况下，组件是应用程序中的页面。

Answer 1

在Angular docs中，尝试：

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

您不需要样式的!important部分。如上所述，在样式表中添加样式将使它们的范围非常明确，从而覆盖了引导样式表中的样式。

Answer 2

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