Semantic UI doesn't apply the theme specified in theme.config

Question

What Do I want to achieve?

I want to add a button in my App.js file. It should be the button from the theme, that I've specified in the theme.config file.

First want to say, that I've read this question from stack overflow already: Semantic UI - Change Theme

I've tried the steps from the answer, but those didn't help me.

And I've read the documentation: https://semantic-ui.com/usage/theming.html

As far as I understand, I need to change the value which is specified in the theme.config file. This file is located in

projectFolder/semantic/src/theme.config

In the theme.config file, there is this global variable @site. I changed this to 'github', ran a gulp build (as written in the SO answer, which is provided at the beginning of the question), and reloaded the dev server. But I still see the default button.

/* Global */
@site        : 'github';
@reset       : 'default';

I've changed also the value of the button variable to 'github'. But that doesn't work too.

/* Elements */
@button      : 'github';

App.js file

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button>Click here</Button>
      </div>
    );
  }
}

In my index.js file I've also imported semantic-ui-css. Is there something else to import?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

semantic-ui-css npm library only provides the default CSS theme. ^[1]

After running gulp build, you need to import the css file in the dist folder and not the one from semantic-ui-css. At this point, semantic-ui-css isn't necessary to be installed in the project since you have semantic-ui library which includes the themes ^[2].

import '<install-folder>/dist/semantic.css'

Note that <install-folder> is the folder path relative to the project folder.