I try to add elevation(shadow) to a MUI Avatar component https://material-ui.com/components/avatars/#image-avatars.
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
Wrapping the Avatar with paper or Card increases the radius.
I also tried setting boxShadow of the Avatar using makeStyles and MUI shadow https://material-ui.com/system/shadows/ but without success.
I have tested, and it works with shadow. Here is my code:
import React from 'react'
import { makeStyles } from '@material-ui/styles'
import Avatar from '@material-ui/core/Avatar'
export default () => {
const classes = useClasses()
return (
<Avatar
className={classes.avatar}
alt="Cindy Baker"
src="/static/images/avatar/3.jpg"
/>
)
}
const useClasses = makeStyles(theme => ({
avatar: {
boxShadow: theme.shadows[3],
}
}))
Found an alternative solution myself:
<Avatar component={Paper} elevation={2}>
<DirectionsCarIcon />
</Avatar>