Material Ui Avatar 添加阴影效果。

Question

我尝试为MUI Avatar组件https://material-ui.com/components/avatars/#image-avatars添加高程（阴影）。

<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

使用paper或者Card包裹头像可以增加圆角半径。

我也尝试使用makeStyles和MUI阴影https://material-ui.com/system/shadows/设置头像的boxShadow，但是没有成功。

- ohlr

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

- CevaComic

---

啊...我以为我需要导入阴影...谢谢澄清。与此同时，我找到了另一种解决方案（如下），但还是谢谢！ - ohlr

不客气，只要它能用，任何解决方案都是好的 :) - CevaComic

Answer 2

我自己找到了另一种解决方案:

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

- ohlr