Creating reusable CSS variables for components can greatly simplify styling. In regular CSS, you would declare them like this:
:root {
--box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3);
}
This variable can then be utilized as shown below:
.my-class {
box-shadow: var(--box-shadow);
}
The challenge arises when trying to achieve the same using useStyles. The attempted method is as follows:
const theme = createMuiTheme({
shadowing: {
boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
});
The main App should be wrapped within:
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
To use it in a component, an approach similar to the below was tried:
const useStyles = makeStyles(theme => ({
workImage: {
boxShadow: theme.shadowing,
},
}));
However, it seems to not be functioning as intended.