Angular 2 - CSS背景颜色不起作用答案

【问题标题】：Angular 2 - CSS background-color not workingAngular 2 - CSS背景颜色不起作用
【发布时间】：2017-12-28 00:40:06
【问题描述】：

我在使用 Angular 2 定义 body 的背景颜色时遇到问题。我尝试更改 html、body、container-fluid 颜色，但它没有改变。我还在我的 app.component.css 中更改了 html 和 body，但它不起作用。

我的css的其余部分都没问题，所以浏览器得到了样式表

app.component.html：

<jogo></jogo>

app.component.css：

html, body{
    background-color: pink;
}

jogo.component

<div class="container-fluid" *ngIf="showPlay">
    <div class="row">      
     <div class="col-xs-8 col-md-8 col-lg-8c">
            <p align="center">
                Qual é<br/>a<br/>Música?
        </p>
     </div>
    </div>
  <div class="row">
    <div class="col-xs-4 col-md-4 col-lg-4"></div>
        <div align="center">
            <button type="button" class="rounded-circle">Play</button>
        </div>
  </div>    
</div> 
<div class="container-fluid" *ngIf="showJogo">
  <div class="row">
   <div class="col-xs-3 col-md-3 col-lg-3" id="tocador">
        Segunda
        <audio controls>
            <!-- caminho devera ser trocado pelo do firebase? -->
            <source src="/assets/Queen - Love of My Life.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
   </div>
</div>
<div class="row">
    <div class="col-xs-3 col-md-3 col-lg-3" id="pontos">Pontos</div>
</div>
<div class="row">
    <div class="col-xs-3 col-md-3 col-lg-3" id="tempo">Tempo</div>
</div>
<div class="row">
   <div class="col-xs-3 col-md-3 col-lg-3" id="pergunta">Pergunta</div>
</div>  
</div>

jogo.component.css：

body{
    background-color: pink;
}
p {
    font-family: 'Lobster', cursive;
    font-size: 3.0em;
    color: #990000;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari 3-8 */
    transform: rotate(-12deg);

}
button {
    background-color: #990000;
    color: #F0D1B7;
    font-size: 1.5em;
    border: none;
    border-radius: 35px;
    width: 10%;
}

CSS 未应用于身体标签：

已加载样式表：

【问题讨论】：

标签： html css angular

【解决方案1】：

Angular 创建Shadow Dom 用于将样式应用于不同的组件。

要将样式应用于根元素，我们可以使用根文件夹中的 style.css。

style.css

html, body{
    background-color: pink;
}

【讨论】：

【解决方案2】：

您正在使用 Bootstrap，因此容器流体会填满整个屏幕。尝试用 !important 给元素背景颜色，你只需为主容器创建一个新类，用 !important 给背景颜色以覆盖容器流体。我认为它应该工作

【讨论】：

【解决方案3】：

Bootstrap 有一个 body 样式，所以取决于你的加载顺序。

您的样式可能会被 Bootstrap 默认背景颜色#fff（白色）覆盖；

您可以在引导 CSS 之后加载本地 CSS。

或者在你的风格中添加 !important（通常不是一个好习惯）。

【讨论】：