CSS variables in Material ui - createMuiTheme

Question

I am trying to create a material ui theme using the existing colors defined as css variables my-pallette.scss:

:root {
  --primary-color: '#FF0000';
  ...
}

And use this like this:

import { createMuiTheme } from '@material-ui/core/styles';

export const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: 'var(--primary-color)',
    },
  },
});

This throws an error:

Uncaught Error: Material-UI: Unsupported var(--primary-color) color. We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().

According to this Github thread: Support CSS variables as theme option this is unsupported at the moment.

Is there any workaround so I can use var(--primary-color) as a primary color in material ui createMuiTheme?

The end goal is to use material ui components in their simplest form with their primary, scondary, etc colors overwritten by my colors.

<Radio color="primary" />

I have tried using the colors from my pallets like this:

const cssVariables = {
  primaryColor: getComputedStyle(document.documentElement).getPropertyValue('var(--primary-color)'),
};

and use cssVariables.primaryColor but this doesn't work and feels very counterintuitive.

My last solution is to duplicate the palette as a normal object as use it as it is but this seems a nightmare for maintenance.

Answer 1

The MUI team is currently working on a solution to support CSS variables. You can track the progress here and here details of the idea.