材质UI头像添加海拔

Question

我尝试将海拔（阴影）添加到 MUI Avatar 组件https://material-ui.com/components/avatars/#image-avatars。<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />paper用或Card增加半径包裹 Avatar 。我还尝试boxShadow使用 makeStyles 和 MUI shadow https://material-ui.com/system/shadows/设置头像，但没有成功。

Answer 1

我已经测试过了，它适用于阴影。这是我的代码：

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

    }

}))

Answer 2

我自己找到了一个替代解决方案：

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

    <DirectionsCarIcon />

</Avatar>