更改“溢出头像”的大小以匹配 AvatarGroup 中的其他头像

Question

设置添加的额外头像max的道具AvatarGroup与其他头像的高度不符。

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

会给出这样的结果

有没有办法让添加的头像遵循通用尺寸？

Answer 1

您可以从父级覆盖所有组件的样式Avatar（包括最后的默认组件）：

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