Changing the size of the "overflow avatar" to match other avatars in AvatarGroup

user_8872691 0
Viewed 395

Upon setting the max prop of the AvatarGroup the extra avatar added does not comply with the height of the other avatars.

<AvatarGroup max={3}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" sx={{ width: 24, height: 24 }}/>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" sx={{ width: 24, height: 24 }}/>
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" sx={{ width: 24, height: 24 }}/>
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" sx={{ width: 24, height: 24 }}/>
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" sx={{ width: 24, height: 24 }}/>
</AvatarGroup>

will give a result like this

Is there a way to make the added avatar obey the common size?

material-ui reactjs html
1 Answers

You can override the styles of all Avatar components (including the default one at the end) from the parent:

<AvatarGroup
  max={4}
  sx={{
    '& .MuiAvatar-root': { width: 24, height: 24, fontSize: 15 },
  }}
>

Codesandbox Demo

user_94494260
Related