customize semantic-ui-react (npm)

Question

How do I customize the css of semantic-ui-react?

I've tried to create site/elements/button.override

and with the following contents:

.ui.button {
  border: solid red; !important
  border-width: 2px; !important
}

but with no changes.

Answer 1

Can you try like this please :

.ui.button {
    border: solid red !important;
    border-width: 2px !important;
}

Peace

Answer 2

You can create custom theme.

For that you need to makes changes to:

1) theme.config - for button - write your theme name instead of default

2) in your theme folder - elements - create button.variables

3) write your inputs here

4) run gulp command in your semantic folder