Documentation for Semantic UI React

[base698]

Links on the site link out the css files, but putting the css as an import fails.

[xiaohanyu]

@base698 will do that soon!

[the-vampiire]

@xiaohanyu any update on this? thank you for the package. i built all the themes but now do not know what to do with them. i had been following this guide which may help as a basis for your own guide. wondering what exactly i need to copy over from the semantic-ui-forest/dist to the semantic folder in CRA.

if you can help me with describing where the theme goes id be happy to write an update for your readme with CRA steps

EDIT: see comment below. did not need any of the gulp / semantic-ui build stuff from the guide i linked above

[the-vampiire]

alright ive messed around with this a bit. i could be way off here but here were the steps i took

• clone then build the themes (from this README)
• copy the dist/themes directory to your project src/theme (create theme/ dir)
• copy the theme you want from dist/path/to/theme.css to your project src/theme/
• its important that both the theme.css and themes/ dir are in the same directory. where this directory is located in your src/ is arbitrary but they need to be together
• import the css file in your src/App.js
• remove (if present) the CDN link to semantic-ui from your public/index.html
• run the project

example using the flat theme

src/
  theme/
    semantic.flat.css <--- copied from semantic-ui-forest/dist/semantic-ui/v2/
    # i believe you only need to copy over the theme asset sub-dir that is needed, not all 4
    # it still must be in themes/ because the css file looks for it there
    # you could modify the import statements in the theme.css if you dont want to nest the assets
    themes/
      default/ <--- this is the assets needed by semantic.flat.css
  App.js <-- import "./theme/semantic.flat.css";

this seems to work for a few components i tested out (buttons, menus etc). but i see an absolute heap of other files and bits that i am not using which leads me to believe i may be missing some important parts that come up from certain components.

do either of you have any suggestions on which of those other files are required? or in what usage they may be required? thanks again

[the-vampiire]

here is what ive gathered:

• [simple] if you want to use a theme in its entirety then use the instructions above

• [complex] if you want to mix and match themes (overriding them for certain components)

  • you do not need to clone / build this repo
  • follow this guide to set up
  • in semantic/src/theme.config set each component to the theme you want
  • rebuild / watch to enact the theme changes