Angular 6 - html element background color does not change with component

Question

I have a login page and I cannot color its background. I was able to color the app-login (name of my login component) element by adding

:host {
      display: block;
      background-color: blue
}

to my scss file. It was suggested in here

But only the background of component element is colored. The other parts of the page remains white. I can color the html element on browser while inspecting. I added background-color:blue; to html{} tag.

I did the same thing on my .scss file but it didnt work. I also tried with !important but it still is not working.

My login.component.scss file:

:host {
    display: block;
    background-color: blue;
  }
html{
    background-color: blue !important; // not working
}
.card-container.card {
    max-width: 400px;
    padding: 50px 60px;
}

.card {
    background-color: #F7F7F7;
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 220px; 
}

Mat-Dob-Dev · Accepted Answer · 2018-11-19 10:36:59Z

2

According to documentation (https://angular.io/guide/component-styles)

"The styles specified in @Component metadata apply only within the template of that component."

This means everything you put in your login.component.scss affects only this particular component.

If you want to use

html{
    background-color: blue !important;
}

You should put it in some global styles file (by default it is src/styles.scss).

answered Nov 19, 2018 at 10:36

Mat-Dob-Dev

1995 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

csel Over a year ago

Thank you! It makes a lot sense. I am in learning process of Angular :)

Collectives™ on Stack Overflow

Angular 6 - html element background color does not change with component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related