html - 如何给一个 Angular 8 组件主体一个背景色？

Question

如何更改此组件的正文背景颜色？我正在使用 Angular 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;

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

非常感谢任何帮助。

Answer 1

这对我来说已经解决了

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


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

@saget 感谢您的帮助!