Base solution for your next web application
Ends in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

Styles.css only works with !important #10905


User avatar
0
ian1908 created
  • What is your product version? Latest
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net core
  • Which theme are you using? Default
  • What are the theme settings? Light menu

When updating the src/styles.css the changes only take effect when I add !important, otherwise they get overridden. Is there a way to do this without using the important statement with each customization?

e.g. in src/styles.css

Does not work

.form-control{ border-radius: 0px; }

Works but would like alternative

.form-control{ border-radius: 0px !important; }


1 Answer(s)
  • User Avatar
    0
    XugoWebTeam created

    you can increase the specificity with something like:

    .name-of-container .form-control { border-radius: 0px; }

    But that is not guaranteed to work - it depends on the specificity of the rule that you are trying to override. You may need to add more elements to your rule for it to work

    e.g.

    .name-of-containers-container .name-of-container .form-control { border-radius: 0px; }