时间戳

首页 > 解决方案 > 如何在 facebook 上使用材料 ui 为 Avatar 制作边框？

reactjs - 如何在 facebook 上使用材料 ui 为 Avatar 制作边框？

问题描述

这就是我尝试它的工作方式：

    
    avatarHolder: {
        boxShadow: theme.shadows[10],
        transform: 'translateY(-50%)',
        borderRadius: "50%",
        border: '1',
    },
    large: {
        width: theme.spacing(25),
        height: theme.spacing(25),    
    },
    

}));



 <Grid  item xs={4} align="center">
        <Box border={4} className={classes.avatarHolder}>
             <Avatar alt="avatar" src={DefaultAvatar} className={classes.large} />
        </Box>
 </Grid>

但这不起作用：另外，当我调整页面大小时，边框正在改变， 这就是发生的事情

我正在尝试让它看起来像 facebook 上的头像 这就是我想要实现的目标

我是反应开发的新手，在此先感谢！

标签： reactjsmaterial-ui

解决方案

为了实现这一点，我一直在使用 Avatar 的 style 属性

<Avatar
    src={avatarURL}
    style={{
             border: '0.1px solid lightgray'
          }}
/>

这是结果示例

推荐阅读