Блог

Главная - Вопросы по программированию - Как я могу создать границу для аватара, как на facebook, с помощью material ui в react?

Как я могу создать границу для аватара, как на facebook, с помощью material ui в react?

#reactjs #material-ui

#reactjs #material-ui

Вопрос:

Вот как я попробовал это работать:

     
    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, заранее спасибо!

Ответ №1:

Для достижения этого я использовал свойство стиля аватара

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

Это пример результата

Метки: