Angular background-color in global styles.css not working

Question

I added the following code to the global styles.css to have a lightblue background color.

html, body{
 background-color: lightblue ;
}

When I refresh the home.component page, I see lightblue screen briefly, then I get the home.component without the lightblue background.

What can cause the background color to be overriden by the home.component. I have no css file for home.component or app.component.

Update: I did, F12, element tab, filter on background. I see where the white color is overriding the style.css background color. It appears that the aws-amplify code is overriding my lightblue background color in styles.css

There's not enough context in your question, but you can try this background-color: lightblue !important; first. The color flashing could be attributed to your styles loading and getting applied first, and Angular's - second. — John Doe
– John Doe, Commented Jul 17, 2019 at 23:13
Most likely, you would have to provide a higher level of specificity for your CSS selector. See this for more details. — John Doe
– John Doe, Commented Jul 17, 2019 at 23:16

Paul-Elie Pipelin · Accepted Answer · 2019-07-18 01:53:42Z

1

The use of !important is a poor solution. You have most likely a css sheet overiding background-color property (check bootstrap if you are using it). The best solution to fix it is opening console in your browser and check manually.

To do it :

press f12
click on top element
filter by background property
you will now be able to see which stylsheet is defining background color

You should see something like that.

answered Jul 18, 2019 at 1:53

Paul-Elie Pipelin

426 bronze badges

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

2 Comments

Reggie1983 Over a year ago

Paul, your way is outstanding. It appears the white background is coming from aws-amplify component. I will edit my post to add the pictures.

Reggie1983 Over a year ago

It appears the amplify-angular component is overriding the background color in angular.css file

Collectives™ on Stack Overflow

Angular background-color in global styles.css not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related