在我的例子中，我必须同时使用createMuiTheme和自定义变量。
首先，我用createMuiTheme创建了一个主题

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

然后我创建了一个单独的对象，在其中添加变量：

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

然后将这两个对象传递给ThemeProvider：

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

最后，要访问变量：

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

“createMuiTheme”函数接受具有有限键集的对象。（调色板、排版、间距等）
你可以只使用普通物体。

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

我通过声明一个值为的js const并将其赋给CSS属性来实现这一点：

const color = "red";

    const useStyles = makeStyles((theme) =>
        createStyles({
            root: {
            color: color
            }
}));

材质UI（v5.6.0）现在支持CSS变量作为一个 * 实验性 * 特性（docs）。