如何在 React 中使用 Material ui 为 Facebook 上的头像制作边框？

Question

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

    
    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 上的头像 这就是我想要实现的目标

我是反应开发新手，提前致谢！

Answer 1

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

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

这是结果示例