7

There are detailed instructions on theming on the traditional Semantic UI, but the equivalent section is missing from the Semantic UI React site. Does that mean that it doesn't support theming or can you possibly use the traditional Semantic UI's approach to theming?

I know that some folks in the React world advocate for not using CSS and instead doing you styling programmatically as part of your component design. What's the Semantic UI React philosophy on that?

Larry Maccherone
  • 8,879
  • 3
  • 23
  • 41

2 Answers2

9

The theming part is "missing" in the react semantic ui docs, but thats on purpose.

Thats the way I did it:

Install the full Semantic UI package. Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.

Detailed documentation on theming in Semantic UI is provided here.

$ npm install semantic-ui --save-dev

After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:

import '../semantic/dist/semantic.min.css';

via: https://react.semantic-ui.com/usage#semantic-ui-package

There are already different ui-frameworks with a more "react" approach. IMHO what semantic ui (react) does is the best real-live solution so far...

fetzig
  • 1,557
  • 1
  • 11
  • 22
  • Is this still the correct way to use custom SUI theme in Semantic UI React? I am using CRA. After `npm install semantic-ui --save-dev` it asks for some options and when I try to do `import '../semantic/dist/semantic.min.css';` I get an error that it cannot import files from outside the `src` folder. – limitlessriver Aug 08 '18 at 17:53
  • 1
    @limitlessriver link to docs still works. but the command to install (especially the flag) changed a little. now it's `yarn add semantic-ui --dev`. Docs are still pretty sweet. Check them out: https://semantic-ui.com/usage/theming.html – fetzig Sep 12 '18 at 13:38
  • 1
    Where are the themes? my project imports the css, but the only one in there is default. – Justin Thomas Mar 06 '19 at 20:08
0

One of the questions is "Where should we put Semantic UI inside your project?" and you should put src/semantic which overwrites the default.

user2069647
  • 52
  • 2