我的根组件的样式未应用到我的Angular应用中

时间:2018-11-04 08:28:03

标签: css angular

我试图将样式应用于我的应用程序根目录,但是尚未应用,请考虑以下stackblitz示例 https://stackblitz.com/edit/angular-zkmfcp

我的应用程序组件中有

app-root {
  background: red;
}

我想念什么? (我对Angular非常陌生...)

这是从哪里来的,实质性的角度网站在此样式表的 root 组件中具有

https://github.com/angular/material.angular.io/blob/master/src/app/material-docs-app.scss

这里有:

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>

1 个答案:

答案 0 :(得分:7)

阅读此article

尝试:

:host {
 background-color: red;
}

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

app-root {
  background-color: red;
}

到src文件夹的 style.css 文件中。

您的DEMO