如何为 Angular 8 组件主体提供背景颜色？答案

【问题标题】：How to give an angular 8 component body a background-color?如何为 Angular 8 组件主体提供背景颜色？
【发布时间】：2019-08-02 16:46:41
【问题描述】：

如何更改此组件的主体背景颜色？我正在使用角度 8。

<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
           center align-items-center">
      </div>
    </div>
  </div>
</div>
 </div>
</div>

html, body {
min-height: 100%;
background: green;
}


.home-container {
color: var(--col-pale);
 min-height: 100%;
 height: 100%;
 font-family: "roboto-reg";
 overflow-y: hidden;
 background-color: red;
}

.home-login-shape-bg {
 background-image: 
 url("../../assets/images/ui/shape_login_dt_1024x682.png");
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 height: 682px;

}

我似乎无法改变背景颜色。我可以为根元素更改它，但我特别想更改单个组件的颜色

非常感谢任何帮助。

【问题讨论】：

尝试在 component.scss 文件中声明你的 css。看起来您在定义全局样式的 styles.scss 中声明。通常 Angular 提供视图封装。

标签： html css angular

【解决方案1】：

这为我解决了问题

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


.home-container {
color: var(--col-pale);
height: 100vh;
font-family: "roboto-reg";
overflow-y: hidden;
}

@saget 感谢您的帮助！

【讨论】：

由于:host，Angular 组件中不需要任何顶级容器。此外，您可能想看看host-context（对于取决于组件包装的父级的条件样式很有用）

【解决方案2】：

Angular 中有一个 CSS 属性，称为 host。因此，在组件的 CSS/Scss 文件中，您可以执行以下操作：-

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

所以下面的代码只适用于作为宿主元素的组件。

【讨论】：

:host 目标是 home-container
:host 将针对您的实际组件。例如，。但我相信“home-container”类的“background-color”会覆盖你的主机样式。您可以尝试删除样式吗？

【解决方案3】：

将整个组件内容移动到主 div 中，您可以根据需要更改样式

<div class="main-div">
<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
       center align-items-center">
      </div>
    </div>
  </div>
</div>

.main-div { background-color: #09c;}

【讨论】：