Material UI: Change theme color by SASS variables

Question

I know we can edit the theme of material UI but I was thinking on making it dynamic, where in we can have SASS Variables set, and it will automatically update the Material UI theme.

I use sass to design my page, and here's the sample of variables I use:

$primary-color: #1E79C7;
$secondary-color: #E5681A;

Currrently for me I do the following for the material ui button, because i want my design to be on one place as much as possible

.app-button-blue {
  background-color: $primary-color !important; 
  margin: 5px;
}

.app-button-gray {
  background: transparent !important;
  box-shadow: none !important;
}

.app-button-white {
  background: transparent !important;
  box-shadow: none !important;
  border: $primary-color solid 1px !important;
}

Is there a way for me to use this SASS variables on overwriting the theme of material ui - like setting the primary and secondary colors?

Answer 1

Material UI uses a javascript based style solution (JSS) instead of a CSS pre-processor like SCSS (see style solution).

This means its not possible to customize the Material UI theme via SCSS variables. Nor is it possible to access the theme in your CSS/SCSS styles.

If you want to use SCSS for styling/theming, you might consider Material Web Components instead.

Answer 2

It is possible to populate the MaterialUI theme from Sass/Scss variables using Webpack wizadry

palette.scss

$primary: #1E79C7;
$secondary: #E5681A;

:export {
  primary: $primary;
  secondary: $secondary;
}

theme.js

import { createMuiTheme } from '@material-ui/core/styles'
import palette from './palette.scss'

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: palette.primary,
    },
    secondary: {
      main: palette.secondary,
    },
  }
})

App.js

import React from 'react'
import { ThemeProvider } from '@material-ui/core/styles'
import { theme } from './theme'

export const App = () => {
  return (
    <ThemeProvider theme={theme}>
       // App
    </ThemeProvider>
  )
}

This means you can use Sass to style and color both your non Material UI and Material UI components from one source of truth

To style other components, just use Sass imports

@import './palette.scss'

.app-button-blue {
  background-color: $primary; // removed !important cos there's usually a better way
  margin: 5px;
}

Answer 3

An example on this GitHub issue suggests how you can do this.

import React from 'react';
import { withStyles } from '@material-ui/core';

const cssVariables = (theme) => ({
  '@global': {
    ':root': {
      '--color-primary': theme.palette.primary.main,
      '--color-secondary': theme.palette.secondary.main,
    }
  }
});

const RootComponent = () => {
  return <div>Whatever...</div>
}

export default withStyles(cssVariables, RootComponent);

Having in mind RootComponent initialises inside ThemeProvider.

Answer 4

There's a way to define the theme variables in the JS-side and use them in the CSS-side to keep a single source of truth and allow dynamic theme switching. You can check the solution I posted on the MUI GitHub repository.