score:2

Accepted answer

"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)",
  }
};

score:8

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

Related Query

More Query from same tag