CSS for input can't be overridden

Hi there, I have an input inside of a menu Item and because of the !important from the Semantic UI CSS package I am unable to override the padding-right. I’ve tried adding my own custom class to the input and setting padding-right: 0em !important but to no avail.

the CSS I’d like to override:

.ui.icon.input input {
    padding-right: 2.67142857em !important;
}

[etshy]

@juliehutchinson001 If you can’t modify variables and don’t want to use !important, the only way I know is to add multiple times a specific class to add “importance” to your rules. Like you can see in @jlukic example here

.ui.icon.input.input input {
  padding-right: 1em !important; /* some new value */
}

You can get rid of the !important here and add lots of .input.input etc. (or another class ofc)

You may need to add a lot of them to override an existing !important though, so it’s quite ugly too.

If someone have another way to do it, I’m curious too.

[itsashis4u]

You’re not supposed to touch the framework’s CSS.

@raptoria Exactly, I don’t understand why we should be changing the source code. That is definitely an anti-pattern.

Currently, I’m using Sass as a preprocessor. Is there any way I can do it without using CSS modules?