如何从该组件的CSS文件中定位Angular组件的样式？

Question

我希望能够定位实际组件，以便对其进行样式设置。这样，我并不是要针对组件内部的元素，而是要针对组件本身。

例如，如果我运行ng g c nav，则会创建一个名为nav的新组件，我将在<app-nav></app-nav>的模板中使用该组件。

我希望能够从上述命令创建的nav.component.css文件中设置实际的<app-nav></app-nav>元素的样式。

到目前为止，我一直在做的工作是在我创建的每个组件中放置一个<div class="container"></div>元素，然后保留该组件的样式。但是我知道这是不对的，我想正确地做。

我可以通过转到父级组件并通过父级的CSS文件或通过styles.css全局文件选择它来设置组件的样式。但是我更希望能够从导航的css文件中执行此操作。我以为:host选择器将允许我执行此操作，但事实并非如此。

更新：这就是我的项目的样子。

App.component.html

<nav></nav>

<router-outlet></router-outlet>

Nav.component.css

:host{
  width: 100%;
  height: 50px;
  background-color: red;
}

Answer 1

这是为:host伪选择器创建的

在nav组件CSS内：

:host {
   border: 1px solid black;
}

Answer 2

您可以通过两种方式从组件样式文件中更改组件样式

:host {
  width : 100%;
  display: block;
  border: 1px solid #ccc;
  padding: 0.25rem;
}

使用全局样式文件的另一种方法，但是在这里您需要使用组件标签选择器

nav {
  color: orange;
  display: inline-block;
  border: 1px dashed;
  margin: 0.5rem 0;
  padding: 0.25rem;
  opacity: 0.75;
}

demo ??

Answer 3

诸如app-nav之类的所有自定义元素都以display: inline为标准，这会引起各种问题。

因此，您应始终向所有组件中添加display: block，以使它们的行为更像div。

我认为这是您的主要问题。