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'));