Use Paper elevation prop via css? - reactjs

Question

This is probably a bigger design question, but in my material ui app, I have tried to keep all styling done in CSS (using makeStyles), rather than do some styling inside the jsx (as per the material ui docs) and some in CSS.
So far all my styling has worked in css only, but I have hi a sticking point with elevation on the Paper component. I thought it would be a simple case of adding elevation: '3' to my useStyles object (cv__paper), but it only works as below:
//works as expeted
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper
//won't style with elevation
<Paper className={classes.cv__paper}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper
...
cv__paper: {
elevation: '3'
}
full code
just to confirm, I have checked that the css is being applied (changed the background to blue)
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
padding: '25px',
maxWidth: '60%'
},
content: {
height: '100%',
width: '100%',
justifyContent: 'center',
textAlign: 'center'
},
image: {
maxWidth: '100%',
maxHeight: '100%'
},
download__icon: {
fontSize: '100px'
},
cv__paper: {
elevation: 3
}
}));
export default useStyles;
const Cv = () => {
const classes = useStyles();
return (
<Container className={classes.root}>
<Box className={classes.content}>
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper>
<Link variant="IconButton" href={CvFile} download="mreaybeaton.pdf">
<GetAppIcon className={classes.download__icon}></GetAppIcon>
</Link>
</Box>
</Container>
);
};
Any ideas?

Answer 1

As the docs mention the elevation is a property that gives to Paper shadow depth.
So if you want to add to your Paper elevation style, you must add boxShadow in your className.
Check the below snippet:
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
padding: '25px',
maxWidth: '60%'
},
content: {
height: '100%',
width: '100%',
justifyContent: 'center',
textAlign: 'center'
},
image: {
maxWidth: '100%',
maxHeight: '100%'
},
download__icon: {
fontSize: '100px'
},
cv__paper: {
boxShadow: "0px 3px 3px -2px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%)"
}
}));
export default useStyles;
const Cv = () => {
const classes = useStyles();
return (
<Container className={classes.root}>
<Box className={classes.content}>
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper>
<Link variant="IconButton" href={CvFile} download="mreaybeaton.pdf">
<GetAppIcon className={classes.download__icon}></GetAppIcon>
</Link>
</Box>
</Container>
);
};