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:
-
How come the icon padding only works by using
!important
— the text padding did not need!important
-
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?