如何调整AvatarGroup的溢出头像尺寸使其与组内其他Avatar大小一致

问题根因 #

你为单个Avatar手动设置的width、height样式不会被AvatarGroup自动生成的溢出计数头像继承，导致两者尺寸不匹配。

解决方案 #

• 方案1：统一在AvatarGroup上配置全局样式，作用到所有内部Avatar（包含自动生成的溢出头像），无需重复给单个Avatar加样式，代码示例如下：

<AvatarGroup 
  max={3}
  sx={{
    '& .MuiAvatar-root': {
      width: 24,
      height: 24,
      fontSize: 12 // 可同步调整溢出数字的字号适配小尺寸
    }
  }}
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

• 方案2：自定义渲染溢出头像，适合需要保留单个Avatar特殊样式的场景，通过renderSurplus属性手动指定溢出头像的尺寸，代码示例如下：

<AvatarGroup 
  max={3}
  renderSurplus={surplus => (
    <Avatar sx={{ width: 24, height: 24, fontSize: 12 }}>+{surplus}</Avatar>
  )}
>
  <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>

内容的提问来源于stack exchange，提问作者m'hd semps