求助：MUI中AvatarGroup内的Avatar边框无法正常显示如何解决？

原因分析 #

AvatarGroup为实现头像重叠效果，会给内部Avatar设置负margin-left，导致后续头像覆盖前面头像的边框；同时默认未区分z-index层级，边框被遮挡后无法显示。

具体解决方法 #

1. 给Avatar设置递增z-index层级 #

让前面的头像边框显示在上方，避免被遮挡：

<AvatarGroup>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'text.primary',
      border: 1,
      borderColor: 'text.primary',
      bgcolor: 'background.paper',
      zIndex: 3
    }}
  >
    DC
  </Avatar>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'info.main',
      border: 1,
      borderColor: 'info.main',
      bgcolor: 'background.paper',
      zIndex: 2
    }}
  >
    A
  </Avatar>
  {/* 新增头像依次递减z-index数值即可 */}
</AvatarGroup>

2. 调整AvatarGroup的重叠间距 #

增大spacing参数，减少头像重叠程度，让边框自然露出：

<AvatarGroup spacing={1}>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'text.primary',
      border: 1,
      borderColor: 'text.primary',
      bgcolor: 'background.paper',
    }}
  >
    DC
  </Avatar>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'info.main',
      border: 1,
      borderColor: 'info.main',
      bgcolor: 'background.paper',
    }}
  >
    A
  </Avatar>
</AvatarGroup>

3. 重置AvatarGroup的负margin样式 #

直接覆盖内部Avatar的负margin，取消头像重叠：

<AvatarGroup
  sx={{
    '& .MuiAvatarGroup-avatar': {
      marginLeft: 1,
    }
  }}
>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'text.primary',
      border: 1,
      borderColor: 'text.primary',
      bgcolor: 'background.paper',
    }}
  >
    DC
  </Avatar>
  <Avatar
    sx={{
      width: 32,
      height: 32,
      typography: 'body2',
      color: 'info.main',
      border: 1,
      borderColor: 'info.main',
      bgcolor: 'background.paper',
    }}
  >
    A
  </Avatar>
</AvatarGroup>

额外提示 #

如果需要更稳定的效果，可以给每个Avatar添加position: relative属性，配合z-index使用，能进一步确保边框不会被其他元素遮挡。

内容的提问来源于stack exchange，提问作者user2113260