我的根组件的样式未应用于我的Angular应用程序中

Question

我试图将样式应用到我的app-root,但是它没有应用,请考虑这个stackblitz示例 https://stackblitz.com/edit/angular-zkmfcp

在我的应用程序组件中,我有

app-root {
  background: red;
}

我错过了什么？(我对Angular很新...)

在这里,材质有角度的网站在它的根组件中有这个样式表

他们在这里:

material-docs-app {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 0;
  right: 0;
}

这本身就是一种风格(我不知道如何解释它的相关性)

我得到了预期的结果,例如将index.html更改为此

<body>
  <div style="background:red;">
  <app-root></app-root>
  </div>
</body>

Answer 1

阅读这篇文章

尝试:

:host {
 background-color: red;
}

或基于评论@ user184994表示组件CSS中的样式仅适用于该组件.在这种情况下,app-root标记不在app.component.html中,因此您应该将其添加到全局css文件add:

app-root {
  background-color: red;
}

到你的src文件夹的style.css文件.

你的DEMO