Angular2如何改变不同组件的背景颜色？

Question

在 Angular2 应用程序中，我一直遇到一个问题，即设置页面的背景颜色或图像。在应用程序中，如果我在 styles.css 中为背景提及特定颜色，那么该颜色将应用于我开发的所有页面，因为它会在全局范围内应用样式。现在，如果我的登录页面是蓝色的，而我想将主页的背景颜色更改为白色，我该怎么做呢？因为在组件 Homepage 中我们有：homepage.component.html 和 homepage.component.css。在 homepage.component.css 中，css 只影响主页的元素。我无法更改整个页面的颜色或添加图像作为整个页面的背景，因为 body { ... } 在那里不起作用。 @import url 也不起作用。

如何更改 Angular2 应用程序中不同组件的背景颜色？

任何帮助将不胜感激。谢谢。

原文由 Steve Doson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是另一个解决方案。它可能有点基础、受限或老套，但它确实有效：

样式.css

  body, html {
   padding: 0;
   width: 100vw;
   height: 100vh;
   ...
 }

.my-container{
  width: 100vw;
  height: 100vh;
  ...
}

主页.组件.css

 .my-container{
    background-color: red;
 }

主页.component.html

 <div class="my-container">
   ...
   /* the content of your component here */
</div>

登录组件.css

 .my-container{
    background-color: blue;
 }

登录.component.html

 <div class="my-container">
   ...
   /* the content of your component here */
</div>

等等。

原文由 Vega 发布，翻译遵循 CC BY-SA 4.0 许可协议