Semantic UI reaction: how to use fewer variables in a create-response-application project

Question

I use Semantic-UI in my application-creation-reaction-project. I use a custom theme to modify individual components using ThemeProvider, which works well. However, I am trying to figure out how to change smaller variables as described in the semantic-ui documentation

The documentation responds to the semantics of ui . Any tips?

My Index.js looks something like this:

import 'semantic-ui-css/semantic.min.css' import { ThemeProvider } from 'styled-components' import mainTheme from './themes/mainTheme' ReactDOM.render( <ThemeProvider theme={mainTheme}> <App /> </ThemeProvider> document.getElementById('root') ) 

Edit: to be specific about what I'm trying to achieve, I want to change the underlying font used.

Answer 1

Looking back at docs , you can basically have the globals folder in your theme folder, which contains two optional files: site.variables and site.overrides . I assume that you can override the @font variable in the specified site.overrides .

Here you can see an example site.variables .

Answer 2

The short answer is ... I do not think you can.

Since you import the .css file here directly, you are using a compiled style sheet, so fewer variables will not help you. I see one of two ways to solve this problem.

1) Create your own stylesheet, which then imports fewer files from these libraries. I do not recommend this option since you are not using less yet.

2) Override the font yourself in your stylesheet. Since you use stylized components, you can use the injectGlobal parameter to achieve this.

Answer 3

EDIT: you can use the semantic-ui package for this. https://react.semantic-ui.com/usage#semantic-ui-package

Install the full semantic interface package. The semantic interface includes Gulp build tools so that your project can save its own theme changes, which allows you to configure style variables.

Here is a detailed documentation of topics in the semantic interface.

 $ npm install semantic-ui --save-dev 

After creating the project with Gulp, you will need to include the mini CSS file in the index.js file:

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

Other approaches: One way is to have the theme configuration as part of your project and have semantics probably in a forked git repo and use this configuration to run a custom build command like https://semantic-ui.com/introduction /build-tools.html .

The workflow will be like this. Run gulp build-new (in forked semantic-ui repo), which takes an argument argument for the theme.config path (pointing to your path to the project response topic) and puts it in forked repo, then runs gulp build , generating themed css. you may have the task to even replace the completed css in your response project.

Answer 4

Check the official template , it contains a pre-configured environment with Webpack3 and sample abstracts that follow the setup guide .