材质UI头像添加海拔

Posted 2023-02-22

【中文标题】材质UI头像添加海拔

【英文标题】：Material Ui Avatar add elevation

【发布时间】：2020-10-06 08:45:51

【问题描述】：

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

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

用paper 或Card 包裹头像会增加半径。

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

【参考方案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
            
            src="/static/images/avatar/3.jpg"
        />
    )


const useClasses = makeStyles(theme => (
    avatar: 
        boxShadow: theme.shadows[3],
    
))

【讨论】：

啊...我以为我必须导入阴影...感谢您的澄清。与此同时，我找到了一个不同的解决方案（如下），但谢谢！

不客气，任何解决方案都是好的，只要它有效:)

【参考方案2】：

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

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