Angular 6-HTML元素背景颜色不会随组件而改变

Question

我有一个登录页面，我无法为其背景着色。通过添加

，我能够为app-login（我的登录组件的名称）元素着色

:host {
      display: block;
      background-color: blue
}

到我的scss文件。在here

中有建议

但是只有组成元素的背景是彩色的。页面的其他部分保持白色。我可以在浏览器上为html元素上色 在检查时。我在background-color:blue;标签中添加了html{}。

我在.scss文件上做了同样的事情，但是没有用。我也尝试使用！important，但仍然无法正常工作。

我的login.component.scss文件：

:host {
    display: block;
    background-color: blue;
  }
html{
    background-color: blue !important; // not working
}
.card-container.card {
    max-width: 400px;
    padding: 50px 60px;
}

.card {
    background-color: #F7F7F7;
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 220px; 
}

Answer 1

根据文档（https://angular.io/guide/component-styles）

  

“ @ Component元数据中指定的样式仅适用于   该组件的模板。”

这意味着您在login.component.scss中放置的所有内容仅会影响此特定组件。

如果要使用

html{
    background-color: blue !important;
}

您应该将其放在一些全局样式文件中（默认情况下为src / styles.scss）。