html - How to change the background colour of different components in Angular2? -

in angular2 app, there problem keep encountering, i.e, setting background colour or image of page. in app, if mention particular colour in styles.css background colour applied pages develop, since applies styles globally. if login page blue in colour , want change background colour of home page white, how go doing that? because in component homepage have : homepage.component.html , homepage.component.css . in homepage.component.css, css affects elements of homepage. cannot change colour of entire page or add image background entire page either since body { ... } not work there. neither @import url work.

how can change background colours of different components in angular2 app?

any appreciated. thanks.

an other solution, little basic, works:

style.css

 body, html{    padding: 0;    width: 100vw;    height: 100vh;  }  .my-container{   with:100vh;   height:100vw;   .... } 

home.component.css

.my-container{     background-color: red;  } 

home.component.html

<div class="my-container>    ...    /* content of component here */ </div 

login.component.css

.my-container{     background-color: blue;  } 

login.component.html

<div class="my-container>    ...    /* content of component here */ </div> 

and on.