title: Semantic-UI React: How to theme using less variables in a create-react-app project
body: <p>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 <a href="https://semantic-ui.com/usage/theming.html" rel="noreferrer">described in the semantic-ui documentation</a></p>
  
  <p>The <a href="https://react.semantic-ui.com/usage" rel="noreferrer">react semantic-ui</a> documentation doesn't offer much on this.
  Any advise?</p>
  
  <p>My Index.js looks roughly like this:</p>
  
  <pre><code>import 'semantic-ui-css/semantic.min.css'
  import { ThemeProvider } from 'styled-components'
  import mainTheme from './themes/mainTheme'
  
  
  ReactDOM.render(
    &lt;ThemeProvider theme={mainTheme}&gt;
      &lt;App /&gt;
    &lt;/ThemeProvider&gt;
    document.getElementById('root')
  )
  </code></pre>
  
  <p>Edit: to be specific on what I am trying to achieve, I want to change the main font used.</p>