Semantic UI React 3.0.0-beta.2Theming
Preface
Semantic UI React does not have its own styling system and fully relies on the theming of Semantic UI. It's really powerful, you don't need to know LESS or CSS you can simply update values of variables or use styles from predefined themes.
In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.
Learn more about themingCreating themesQuick start
Semantic UI offers its own build system that uses Gulp and produces prepared CSS files.
In all cases, we recommend to use the LESS package and tune it into your build system with Webpack. The LESS package also does not depend on Gulp and other cruft things. However, this package is not friendly for Webpack and requires additional configuration.
Semantic UI LESSConfiguring Webpack for themingTheming with Create React App
The key point is that you don't want eject, but you want to customize styles 🤔
Don't eject your Create React AppThis is a one-way operation. Once you
eject, you can't go back!
Remove existing styles
First of all, please remove existing references for semantic-ui & semantic-ui-css package or styles included from CDN to avoid styles duplication.
Install required dependencies
Create React App does not support LESS out of the box; we propose to use @craco/craco to add its support and avoid eject. You have to install required packages:
And then update your package.json and create craco.config.js:
Scaffold custom styles
We made a special CLI tool that will copy necessary files with the skeleton of your customization.
node_modules/semantic-ui-less/_site folder to src/semantic-ui/sitenode_modules/semantic-ui-less/theme.config.example to src/semantic-ui/theme.configtheme.config
This file is mostly prepared, but you have to change some details in the bottom of it:
Last but not least: import main LESS file
You have to import semantic.less file in your entry file.
It is working now!
You can now go e.g. to src/semantic-ui/site/globals/site.variables and add:
Which will change your primary color and background color of the <body> 🚀
Vercel.