CODEWITHSUNDEEP
reactjssassmaterial-uithemes
Abigail A.
Abigail A.

Reputation: 95

Material UI: Change theme color by SASS variables

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?

Upvotes: 9

Views: 17046

Answers (6)

Adi Dasler
Adi Dasler

Reputation: 528

Initialize your variables in the <body> tag styles.

body {
  --my-var: #fff;
}

Then it will be visible for Material UI Drawers and other components, that opening with portals.

UPD 2:

There is another way to do the thing above dynamically. So, if you want to use CSS Variables to change Material UI components styles, for example - for Drawer (that uses React-Portals to lift up a component to top level of the DOM). The problem was that by MUI lifted up components were out of the 'root' div and CSS Variables could not reach these components.

Solution:

  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.body.classList.remove('dark', 'light');
    document.body.classList.add(theme);
  }, [theme]);

and add variables to these classNames in some file.

File theme.scss:

.light {
  --theme-color: #A80000;
  --theme-page-background: #FFF;
  $theme-page-background: #FFF;
  --theme-page-text: $color-text;
}

.dark {
  --theme-color: #0000A8;
  --theme-page-background: #111;
  $theme-page-background: #111;
  --theme-page-text: #FFF;
}

Import your theme.scss file to the project and it have to work.

Upvotes: 0

B14s
B14s

Reputation: 861

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.

Upvotes: 1

Kieran101
Kieran101

Reputation: 699

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;
}

Upvotes: 10

chetanya
chetanya

Reputation: 61

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.

Upvotes: 3

Michal Filip
Michal Filip

Reputation: 990

It may not be exactly what you wanted to achieve, but the following article explains how you can export SASS variables. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript Afterwards you can import these in JS and use them to set up your theme.

Upvotes: 0

Luke Peavey
Luke Peavey

Reputation: 3879

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.

Upvotes: 6

Related Questions