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

Question

我在使用Angular 2时遇到了定义网页背景颜色的问题。我尝试过更改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样式：

样式表已加载：

- nanquim

Answer 1

Angular 通过创建 Shadow Dom 来为不同组件应用样式。

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

style.css

html, body{
    background-color: pink;
}

- Ajay

Answer 2

你正在使用Bootstrap，因此container-fluid填充整个屏幕。尝试使用!important为元素设置background-color，你可以为主容器创建一个新类，并使用!important给它赋予background-color以覆盖container-fluid。我认为这应该可以解决问题。

- Menahem Gil

Answer 3

Bootstrap有一个针对body的样式，因此取决于您的加载顺序。

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

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

或者在您的样式中添加!important（通常不是一个好习惯）。

- fjoe

Answer 4

Angular将组件样式限定到目标组件，因此任何针对组件外部元素的选择器都不会生效。例如，.tout {color: yellow}将被转换为类似于.tout[_ngcontent-kls-c1] {color: yellow}的形式。同样地，body {background-color: pink}将被转换为类似于body[_ngcontent-kls-c1] {background-color: pink}的形式。 因此，您需要将全局样式放置在全局样式表中，例如src/styles.css。

- ekene