Material UI Global Css Variables

I would like to declare some css variables that I will reuse among my components. This is how you do it with plain css: :root { --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3); }

Solution 1:

In my case I had to use both createMuiTheme and custom variables. To achieve it I did as follows.

First I created a theme with createMuiTheme

const theme = createMuiTheme({
  typography: {
    fontFamily: "verdana",
  },
});

Then I created a separated object where I add my variables:

const cssVariables = {
  shadowing: {
     boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
};

Then I pass the two objects to my ThemeProvider:

<ThemeProvider theme={{ ...theme, ...cssVariables }}>

And finally, to access the variable:

const useStyles = makeStyles(theme => ({
  workImage: {
    boxShadow: theme.shadowing.boxShadow,
  },
}));

Solution 2:

"createMuiTheme" function accepts object with limited set of keys.(palette, Typography, spacing...etc)

You can use just normal object.

const theme = {
  shadowing: {
     boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
};