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.