如何从一个角度的单个组件更改背景颜色答案

【问题标题】：how to change background color from one single component in angular如何从一个角度的单个组件更改背景颜色
【发布时间】：2022-01-09 20:41:07
【问题描述】：

我正在构建一个网站，它的颜色将在白色和黑色之间交替，但我不能将背景颜色单独放在组件上，只能放在全局 CSS 上。如何解决？

【问题讨论】：

你为什么说你不能？

标签： html css angular

【解决方案1】：

这应该可以通过多种方式实现。一种是在每个组件的样式文件中定位宿主元素：

:host {
  background-color: black;
}

要使这种动态化，您可以使用绑定或通过全局样式表做一些巧妙的事情，就像您提到的那样。

【讨论】：

【解决方案2】：

有不同的方法可以做到这一点，但我认为这是最简单的一种。

你可以只做两个 div

HTML：

<div class="black">
</div>

和

<div class="white">
</div>

然后你在 CSS 中编辑这两个类

你可以这样做：

.black {
   background-color: black;
}

.white {
   background-color: white;
}

【讨论】：

【解决方案3】：

使用 Css 文件而不是内联编码总是更好，因为它很容易发现并更改数据

HTMl
     <div>
          <div class="col-md-12 col-sm-12 lbl_div ">  
             <label class="title textclr">
               E-MAIL
              </label> 
              </div>
              <div class="col-md-12 col-sm-12 "> 
             <input type="email" id= "email" name="email" class="txtdiv form-                   control" [(ngModel)]="email" required email>
             </div>
      </div>
      
      CSS
      
      .txtdiv {
        margin-top: 1em;
        margin-left: 7em;
        width: 60%;
        height: 2em;
        border-radius: 1em;
        border-color: fuchsia;
        box-shadow: 1px 2px 12px 0px #fff;
        background-color: black
    }

【讨论】：