Theming

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 theming Creating themes

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 LESS Configuring Webpack for theming

The key point is that you don't want eject, but you want to customize styles 🤔

This is a one-way operation. Once you eject, you can't go back!

Don't eject your Create React App

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.

I want copy files manually

Copy the entire node_modules/semantic-ui-less/_site folder to src/semantic-ui/site

Copy node_modules/semantic-ui-less/theme.config.example to src/semantic-ui/theme.config

`theme.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> 🚀

Preface