각도 2 - CSS 배경색이 작동하지 않음

Question

각도 2를 사용하여 신체의 배경색을 정의하는 데 문제가 있습니다. html, body, container-fluid 색상을 변경해 보았지만 변경되지 않았습니다. 또한 app.component.css에서 html과 body를 변경했지만 작동하지 않았습니다.

내 CSS의 나머지는 괜찮습니다, 그래서 브라우저가 스타일 시트

app.component.html을 가지고 :

<jogo></jogo> 

app.component.css :

html, body{ 
    background-color: pink; 
} 

조고. 구성 요소

<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는 body 태그에 적용하지

Answer 1

각도는 다른 구성 요소에 스타일을 적용하기 위해 Shadow Dom을 만듭니다.

루트 요소에 스타일을 적용하려면 루트 폴더에서 style.css를 사용할 수 있습니다.

있는 style.css

html, body{ 
    background-color: pink; 
} 

Answer 2

을 당신은 부트 스트랩을 사용하고, 그래서 용기 유체는 전체 화면을 채 웁니다 . 요소 배경색에!를 주려고하면 중요합니다. 중요한 것은 주 용기에 대한 새로운 클래스를 만들고, 컨테이너 액체를 오버라이드 (override)하는 것이 중요하다는 배경색을 부여하는 것입니다. 나는 그것이 작동해야한다고 생각한다.

Answer 3

부트 스트랩은 적재 순서에 따라 몸에 스타일을 가지고있다.

스타일이 #fff (흰색)의 부트 스트랩 기본 배경색에 의해 무시 될 수 있습니다.

부트 스트랩 CSS 후에 로컬 CSS를로드 할 수 있습니다.

또는 귀하의 스타일에 중점을 두십시오 (일반적으로 좋은 습관은 아닙니다).