Customizing Material UI themes with CSS variables is a powerful feature of the createMui

Question

Customizing Material UI themes with CSS variables is a powerful feature of the createMui

In an attempt to create a Material UI theme using existing colors defined as CSS variables in my-palette.scss, the following code is utilized:

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

The goal is to incorporate these colors like so:

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

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

This command triggers an error message:

Error: Material-UI does not support the color format var(--primary-color). Supported formats include: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().

A Github thread suggests that this feature is currently unsupported: Support CSS variables as theme option.

Is there a workaround available to utilize var(--primary-color) as the primary color in a Material UI createMuiTheme?

The objective is to easily override default Material UI component colors with custom ones such as primary, secondary, etc.

<Radio color="primary" />

Alternative attempts have included extracting colors from the palette like this:

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

However, utilizing cssVariables.primaryColor has been ineffective and non-intuitive.

The final proposed solution involves manually recreating the palette as a standard object and using it directly, but this method seems cumbersome for maintenance purposes.

javascript material-ui css-variables

Answer 1

Answer №1

The MUI development team is actively working on incorporating CSS variables into their framework. Keep tabs on the progress here and delve into the specifics here. For official documentation, visit this link.

Latest update as of 21st December 2022

CSS variables have now been implemented by MUI as part of an experimental API. Refer to the documentation here for more details.

Answer 2

The MUI development team is actively working on incorporating CSS variables into their framework. Keep tabs on the progress here and delve into the specifics here. For official documentation, visit this link.

Latest update as of 21st December 2022

CSS variables have now been implemented by MUI as part of an experimental API. Refer to the documentation here for more details.

Answer 3

Answer №2

One approach shared by NearHuscarl effectively accomplishes the task, although a slight flicker is present due to the palette change. To eliminate this issue, implementing lazy initialization within the useState function can be beneficial.

const cssVar = (name: string) =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim();

const App: React.FC = () => {
  const [theme] = useState(() =>
    createTheme({
      palette: {
        primary: {
          main: cssVar("--color-primary"),
          light: cssVar("--color-primary-light"),
          dark: cssVar("--color-primary-dark"),
          bg: cssVar("--color-primary-bg"),
          contrastText: cssVar("--color-primary-contrast-text"),
        },
      },
    })
  );

  return (
    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>
  );
};

Answer 4

One approach shared by NearHuscarl effectively accomplishes the task, although a slight flicker is present due to the palette change. To eliminate this issue, implementing lazy initialization within the useState function can be beneficial.

const cssVar = (name: string) =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim();

const App: React.FC = () => {
  const [theme] = useState(() =>
    createTheme({
      palette: {
        primary: {
          main: cssVar("--color-primary"),
          light: cssVar("--color-primary-light"),
          dark: cssVar("--color-primary-dark"),
          bg: cssVar("--color-primary-bg"),
          contrastText: cssVar("--color-primary-contrast-text"),
        },
      },
    })
  );

  return (
    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>
  );
};

Answer 5

Answer №3

The workaround in question is effective, although it seems likely that getComputedStyle() is being called within the module scope before the stylesheets are fully initialized.

One potential solution would be to place this code snippet inside the render method as shown below.

const [theme, setTheme] = React.useState(null);

React.useLayoutEffect(() => {
  const color = getComputedStyle(document.documentElement)
    .getPropertyValue("--your-css-color")
    .trim(); // leading whitespace may be present in the result.

  setTheme(
    createMuiTheme({
      palette: {
        primary: {
          main: color
        }
      }
    })
  );
}, []);

Live Demo

https://codesandbox.io/s/63916278css-variables-in-material-ui-createmuitheme-jmofo?file=/src/App.js

Answer 6

The workaround in question is effective, although it seems likely that getComputedStyle() is being called within the module scope before the stylesheets are fully initialized.

One potential solution would be to place this code snippet inside the render method as shown below.

const [theme, setTheme] = React.useState(null);

React.useLayoutEffect(() => {
  const color = getComputedStyle(document.documentElement)
    .getPropertyValue("--your-css-color")
    .trim(); // leading whitespace may be present in the result.

  setTheme(
    createMuiTheme({
      palette: {
        primary: {
          main: color
        }
      }
    })
  );
}, []);

Live Demo

https://codesandbox.io/s/63916278css-variables-in-material-ui-createmuitheme-jmofo?file=/src/App.js

Answer 7

Answer №4

Utilizing color options from your theme settings can be a more efficient approach. By doing so, you have the ability to specify Material UI colors as CSS variables.

import React, { useEffect } from 'react'
import { createTheme, ThemeProvider } from '@mui/material/styles'

import { indigo, amber } from '@mui/material/colors'
const themeOptions = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: amber[600] },
    background: { default: '#F3F6F9' },
  },
})
const colorKeys = ['background', 'common', 'error', 'grey', 'info', 'primary', 'secondary', 'success', 'text', 'warning']
const r = document.querySelector(':root')
const AppThemeProvider = ({ children }) => {
  useEffect(() => {
    colorKeys.forEach((color) => {
      const themeColorObj = themeOptions.palette[color]
      for (const key in themeColorObj) {
        if (Object.hasOwnProperty.call(themeColorObj, key)) {
          const colorVal = themeColorObj[key]
          r.style.setProperty(`--color-${color}-${key}`, colorVal)
        }
      }
    })
  }, [])
  return <ThemeProvider theme={themeOptions}>{children}</ThemeProvider>
}
export default AppThemeProvider

This method allows you to leverage CSS variables like Sass or traditional CSS.

.dx-link-edit {
  color: var(--color-primary-main);}

Answer 8

Utilizing color options from your theme settings can be a more efficient approach. By doing so, you have the ability to specify Material UI colors as CSS variables.

import React, { useEffect } from 'react'
import { createTheme, ThemeProvider } from '@mui/material/styles'

import { indigo, amber } from '@mui/material/colors'
const themeOptions = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: amber[600] },
    background: { default: '#F3F6F9' },
  },
})
const colorKeys = ['background', 'common', 'error', 'grey', 'info', 'primary', 'secondary', 'success', 'text', 'warning']
const r = document.querySelector(':root')
const AppThemeProvider = ({ children }) => {
  useEffect(() => {
    colorKeys.forEach((color) => {
      const themeColorObj = themeOptions.palette[color]
      for (const key in themeColorObj) {
        if (Object.hasOwnProperty.call(themeColorObj, key)) {
          const colorVal = themeColorObj[key]
          r.style.setProperty(`--color-${color}-${key}`, colorVal)
        }
      }
    })
  }, [])
  return <ThemeProvider theme={themeOptions}>{children}</ThemeProvider>
}
export default AppThemeProvider

This method allows you to leverage CSS variables like Sass or traditional CSS.

.dx-link-edit {
  color: var(--color-primary-main);}

Customizing Material UI themes with CSS variables is a powerful feature of the createMui

Answer №1

Answer №2

Answer №3

Live Demo

Answer №4

Similar questions

"Utilize Ajax to load PHP content and dynamically refresh a specific div

Error: We are facing an issue with new.mongoose.Schema as it is not functioning properly and

How do I detect the " * " key in a keyEvent?

Dealing with Socket.io connection problems on Node.js and Windows 10 platform

Exploring the GET request in Meteor JS

Arranging arrangements in javascript

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

What is the best way to retrieve the offsetHeight of a Component Element using Vue.js?

Unable to modify styles by using classes in material-ui

The ArrowHelper in THREE.js seems to be ignoring the natural rotation provided by Euler angles

Acquiring exclusive files from Laravel 8 storage directory using JavaScript

Troubleshooting problems with React Hook Form Controller

I am interested in creating a text box that has the ability to gather user input and connect it to a search

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

What is the best method for incorporating a Vue 2 component into an HTML single file that relies on Vue 3's UMD build?

jQuery: event not firing for dynamically loaded elements via AJAX

It is not possible to use Date.now within passport.js

Is it possible for node.js to execute promises without needing to await their fulfillment?

Mastering jQuery ajax in Google Chrome Extensions

Exploring ways to display featured posts within specific category sections