html - 更改 "overflow avatar"的大小以匹配 AvatarGroup 中的其他头像

Question

在设置 AvatarGroup 的 max 属性后，添加的额外头像不符合其他头像的高度。

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