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;
    ...
}

4 answers

  • answered 2018-07-11 05:48 xxxmatko

    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.

  • answered 2018-07-11 05:49 marika.daboja

    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;

  • answered 2018-07-11 05:54 yala ramesh

    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.

  • answered 2018-07-11 06:04 Fouad Kajj

    Try this :

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