CODEWITHSUNDEEP
javascriptcssreactjstypescriptmaterial-ui
ohlr
ohlr

Reputation: 1909

Material Ui Avatar add elevation

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.

Upvotes: 3

Views: 4055

Answers (2)

CevaComic
CevaComic

Reputation: 2104

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

Upvotes: 5

ohlr
ohlr

Reputation: 1909

Found an alternative solution myself:

<Avatar component={Paper} elevation={2}>
    <DirectionsCarIcon />
</Avatar>

Upvotes: 3

Related Questions