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

}

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

  }

});

My main App is enclosed within

<ThemeProvider theme={theme}>

  <App />

</ThemeProvider>

I tried using it in my component:

const useStyles = makeStyles(theme => ({

  workImage: {

    boxShadow: theme.shadowing,

  },

}));

But it's not working.