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

Question

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?

Answer 1

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 },
  }}
>