CODEWITHSUNDEEP
cssangular
Vala Khosravi
Vala Khosravi

Reputation: 2570

How to override !important style from external package in angular

Problem is I can't override CSS property in my project because of external CSS file has !important on my target property and my style.css is loaded after that external CSS file

example:

package css style: 

.ui-slider .ui-slider-handle {
    color: red !important;
    ...
}

my style.css style: 

.ui-slider {
    color: red !important;
    ...
}

Upvotes: 1

Views: 2761

Answers (4)

M Fuat
M Fuat

Reputation: 1440

Try this :

.ui-slider[style] {
    color: red !important;
    ...
}

Upvotes: 0

yala ramesh
yala ramesh

Reputation: 3362

Try to you add one your own class (ex:sb-slider) in above this control, then use like below

.sb-slider {
  .ui-slider .ui-slider-handle {
     color: blue !important;
     ...
  }
}

I hope this is help you.

Upvotes: 1

xxxmatko
xxxmatko

Reputation: 4142

Change your style like this:

body .ui-slider .ui-slider-handle {
    color: red !important;
}

If your style is loaded after the external style, than the external style will be overridden by your style.

By adding the body selector to the rule, your rule will be more precise than the one in the external file, and it will have higher priority even if your style will be loaded before the external style.

Upvotes: 2

marika.daboja
marika.daboja

Reputation: 991

If your css is loaded after external css, then your css will overwrite it.

ie.

external.css

.ui-slider .ui-slider-handle {
    color: red !important;
    ...
}

internal.css

.ui-slider .ui-slider-handle {
    color: blue !important;
    ...
}

outcome: color: blue;

Upvotes: 1

Related Questions