Semantic-ui: CSS for input can't be overridden

[raptoria]

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;
}

[jlukic]

You can use theming variables. This one is @iconMargin

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/elements/input.less#L275

If you need a quick solve

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

[awgv]

Hi @raptoria, just wanted to let you know that you can use our Gitter chatroom for quick usage questions.

[raptoria]

@jlukic that solves my issue, thanks for the help! I'll check out the chatroom next time I have an issue.

[itsashis4u]

This didn't work for me. I can't override the padding-left property of .ui.icon.input input even after placing !important.

[awgv]

@itsashis4u Take a look at the source that was linked above, !important is already there, and all you need to do is to open installation_folder/src/site/elements/input.variables and override the variable in question like so:

@iconMargin: 1em;

[itsashis4u]

@Banandrew Thanks but I am using Semantic-UI-React and I'm importing the file from a package semantic-ui-css and I'm importing a minified css file. I can't think of a way to do the above in this.

Also, isn't it a bad practice to change the original file?

[awgv]

@itsashis4u Yes, you’ll have to use the full package to be able to customize the framework. You can override the default minified rules using an additional CSS file, but that’s an anti-pattern—I’d recommend against it to keep your project maintainable.

[raptoria]

@itsashis4u I'm doing the same thing as you, overriding the default CSS using semantic-ui-css with my own CSS files and Semantic UI React. I think mandating that a developer use a specific CSS Preprocessor (LESS) to override a framework's default CSS is an antipattern. You're not supposed to touch the framework's CSS. I'm not using a preprocessor, nor do I want to add that extra step into my project build. It also seems unnecessary that are are so many !importants in all the semantic styles to begin with. If the stylesheets are cascading properly they shouldn't be necessary.

this worked for me (using CSS Modules):

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

[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?

[raptoria]

does Sass let you do global overrides? that's what :global does in CSS Modules. You might also want to check that your Sass files get included after the vendor css, and not before..

[juliehutchinson001]

I am having the exact same problem as @itsashis4u and @raptoria. I am also using Sass. Did you ever find a better solution to override the styles? I am trying to avoid doing things like !important or :global.

[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.