Semantic-UI React: How to theme using less variables in a create-react-app project

Question

I am using Semantic-UI in my create-react-app project. I am using a custom theme to modify individual components using ThemeProvider, which is working well. However I am trying to figure out how to modify the less variables as described in the semantic-ui documentation

The react semantic-ui documentation doesn't offer much on this. Any advise?

My Index.js looks roughly 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 on what I am trying to achieve, I want to change the main font used.

Answer 1

I came across this tutorial to use a custom theme using sematnic UI and CRA which outlines this process perfectly. It is quiet long process so I'll leave it with just the link.

Here is the link to the Github repo of the tutorial.

Answer 2

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

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

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

Workflow would be like this. Run gulp build-new(in forked semantic-ui repo) which takes say argument for theme.config path(pointing to your react projects theme path) and places into forked repo then runs gulp build generating themed css. you can have the task to even replace complied css into your react project.

Answer 3

Looking over the docs you could basically have a globals folder in your theme folder which contains two optional files: site.variables and site.overrides. I assume you could override the @font variable in said site.overrides.

You can see an example of site.variables here.

Answer 4

The short answer... I don't think you can.

Since you are importing the .css file here directly, you are using the compiled stylesheet, so less variables will do you no good. I see one of two ways to solve this issue.

1) Create your own less stylesheet that then imports this libraries' less files. I don't recommend this option since you aren't already using less.

2) Override the font yourself in your own stylesheet. Since you're using styled components, you can use the injectGlobal option to achieve this.