3

I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.

But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").

Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!

Improve this question
1

2 Answers 2

Reset to default
2

This link may also help in addition to the theming page on the docs site.

https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/

It has a setup script after you run

npm install --save-dev semantic-ui
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Please write the answer here. Do not post a link. Thanks.
This link may also help in addition to the theming page on the docs site. jsramblings.com/… It has a setup script after you run npm install --save-dev semantic-ui
1

Yes there is a way to customize themes and create your own https://react.semantic-ui.com/theming/

Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.

One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it

Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.

https://semantic-ui.com/usage/theming.html#browsing-for-themes

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.