Angular 2 CSS order of precedence not respected

Question

On my layout page, in the <head>, I have the following styles:

<link rel="stylesheet" href="/dist/vendor.css">
<style>
    .bg-dark {
        background-color: #240000; 
    }
</style>

I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:

Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?

!important Always wins

realbart
– realbart

2017-11-18 20:34:42 +00:00
Commented Nov 18, 2017 at 20:34 — realbart
– realbart, Commented Nov 18, 2017 at 20:34

Martin Parenteau · Accepted Answer · 2017-11-18 20:41:00Z

5

The background-color attribute in vendor.css has the !important flag, which elevates its priority:

background-color: #222222 !important;

To override that setting, you should set the !important flag in your layout page CSS:

<style>
    .bg-dark {
        background-color: #240000 !important; 
    }
</style>

or remove that flag in vendor.css, if your can.

edited Nov 18, 2017 at 20:41

answered Nov 18, 2017 at 20:33

Martin Parenteau

74k13 gold badges136 silver badges157 bronze badges

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

1 Comment

Jonathan Eckman Over a year ago

Cant believe I missed that.

Collectives™ on Stack Overflow

Angular 2 CSS order of precedence not respected

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related