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?