0

I want to override default Dropdown properties that belong to react semantic UI

Here is my dropdown:

<Dropdown 
    placeholder="User" 
    selection 
    compact 
    options={userOptions}
/>

The text in my dropdown has too much padding so in my CSS I removed it like so:

.default.text {
    font-size: 10px;
    padding: 0;
}

I got rid of the padding from the Dropdown icon as well:

.dropdown.icon {
    padding: 0 !important;
}

However, as you can see this only worked when I used !important

Related questions:

  1. How come the icon padding only works by using !important -- the text padding did not need !important

  2. I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

user2456977
  • 3,830
  • 14
  • 48
  • 87
  • Cant you make your css selector more specific? Usally the most specific selector is used by the browser to add styles. Add parent classes or even parent elements to your selector. A small hack is to apply the same class twice to be “very specific” div.class.class is a valid css selector and is more specific than div.class Avoiding !important is an opinion, if you believe it is a good decision to use it, use it – Jasper Seinhorst Nov 09 '17 at 23:09

1 Answers1

2

Use a higher css rule specificity, like:

.somegrandparent .someparent .dropdown.icon {
  padding:0;
}

How come the icon padding only works by using !important -- the text padding did not need !important

Your one rule is working without !important as it might already have a higher specificity whereas the other did not.

I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

It is "ok" to use to override external libraries sparingly. But if it is possible to override by a higher specificity that is preferred as it will be easier to debug css conflicts / bugs.

Patrick Evans
  • 41,991
  • 6
  • 74
  • 87