I'm facing an issue with my login page where I can't seem to change the background color. While I was able to successfully change the background color of the app-login element (the name of my login component) by adding
:host {
display: block;
background-color: blue;
}
in my SCSS file, as suggested here.
However, only the background of the component element is changing color. The rest of the page remains white. I tried inspecting and changing the background color of the HTML element in the browser inspector. I added background-color: blue; to the html{} tag.
Even after replicating this in my .scss file, it didn't work. I attempted using !important but no luck so far.
Below is a snippet from my login.component.scss file:
:host {
display: block;
background-color: blue;
}
html{
background-color: blue !important; // this doesn't work
}
.card-container.card {
max-width: 400px;
padding: 50px 60px;
}
.card {
background-color: #F7F7F7;
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 220px;
}