我如何为头像做一个边界，就像在facebook上的材料ui在反应?

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上的头像这就是我想要达到的效果

我是react开发的新手，提前感谢!

Answer 1

为了达到这个效果，我使用了Avatar的style属性

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

这是结果示例