材质UI全局CSS变量

我想声明一些要在各个组件之间重用的css变量.这是使用普通CSS的方法:

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

然后将其按如下方式使用:

That would then be used as follows:

.my-class {
  box-shadow: var(--box-shadow);
}

如何通过useStyles实现相同的目的?我无济于事地尝试了以下方法:

How can I achieve the same with useStyles? I tried the following with no avail:

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

我的主应用包含在其中

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

我尝试在组件中使用它:

I tried using it in my component:

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

但是它不起作用.