title: CSS variables in Material ui - createMuiTheme
body: <p>I am trying to create a material ui theme using the existing colors defined as css variables <code>my-pallette.scss</code>:</p>
  <pre><code>:root {
    --primary-color: '#FF0000';
    ...
  }
  </code></pre>
  <p>And use this like this:</p>
  <pre><code>import { createMuiTheme } from '@material-ui/core/styles';
  
  export const muiTheme = createMuiTheme({
    palette: {
      primary: {
        main: 'var(--primary-color)',
      },
    },
  });
  </code></pre>
  <p>This throws an error:</p>
  <blockquote>
  <p>Uncaught Error: Material-UI: Unsupported <code>var(--primary-color)</code> color.
  We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().</p>
  </blockquote>
  <p>According to this Github thread: <a href="https://github.com/mui-org/material-ui/issues/12827" rel="noreferrer">Support CSS variables as theme option</a> this is unsupported at the moment.</p>
  <p>Is there any workaround so I can use <code>var(--primary-color)</code> as a <strong>primary</strong> color in material ui <code>createMuiTheme</code>?</p>
  <p>The end goal is to use material ui components in their simplest form with their <strong>primary, scondary, etc</strong> colors overwritten by my colors.</p>
  <pre><code>&lt;Radio color=&quot;primary&quot; /&gt;
  </code></pre>
  <p>I have tried using the colors from my pallets like this:</p>
  <pre><code>const cssVariables = {
    primaryColor: getComputedStyle(document.documentElement).getPropertyValue('var(--primary-color)'),
  };
  </code></pre>
  <p>and use <code>cssVariables.primaryColor</code> but this doesn't work and feels very counterintuitive.</p>
  <p>My last solution is to <strong>duplicate</strong> the palette as a normal object as use it as it is but this seems a nightmare for maintenance.</p>