[AvatarGroup] component interacts poorly with custom Avatars

Due to something in the way AvatarGroup clones its children, it can’t be used with custom Avatar components, which greatly limits its utility.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have a custom Avatar component with fixed sizes. It also allows for wrapping with a link etc, but here’s a simplified example:

function MyAvatar = ({size = 'md', user}: Props) => {
  const classes = useStyles()
  const className = classes[size]
  const { name, imageUrl } = user
  return <MuiAvatar className={className} src={imageUrl} alt={name} />
}

I want to use it within an AvatarGroup like this:

<AvatarGroup>
  <MyAvatar user={user1} size="xl" />
  <MyAvatar user={user2} size="xl" />
</AvatarGroup>

However, when I do this, the xl className is not applied to the nested MuiAvatar.

Putting them side by side shows the difference:

  <MyAvatar size="xl" user={user1} linked={false} />
  <AvatarGroup>
    <MyAvatar size="xl" user={viewer} linked={false} />
  </AvatarGroup>

The MuiAvatar outside AvatarGroup gets : MuiAvatar-root MuiAvatar-circle makeStyles-xl-509

The MuiAvatar inside AvatarGroup gets: MuiAvatar-root MuiAvatar-circle MuiAvatarGroup-avatar

Here’s the full fragment

<div class="MuiAvatar-root MuiAvatar-circle makeStyles-xl-509">
  <img alt="Jamie Talbot" src="url" class="MuiAvatar-img">
</div>
<div class="MuiAvatarGroup-root">
  <div class="MuiAvatar-root MuiAvatar-circle MuiAvatarGroup-avatar" style="z-index: 2;">
    <img alt="Jamie Talbot" src="url" class="MuiAvatar-img">
  </div>
</div>

Expected Behavior 🤔

Both nested MuiAvatars should have the className makestyles-xl-509

Tech	Version
Material-UI	v4.9.11
React	16.13.1
Browser
TypeScript	3.8.3
etc.

Context

It’s probably due to the way the children are cloned, but I can’t actually see why the classNames for nested children would not be cloned too. 🤷🏼‍♂️

[majelbstoat]

Ahh, I finally understand, and got it working. Thanks for taking so much time to help me get that right. For others similarly confused, the final component is:

const Avatar = ({ size = 'md', user, className, linked = true, ...other }: AvatarProps) => {
  const classes = useStyles()
  const username = user?.username || 'unknown'
  const name = user?.name || '?'
  const src = user?.avatar.url || undefined

  const Component = (
    <MuiAvatar className={`${className} ${classes[size]}`} src={src} alt={name} {...other} />
  )
  if (linked) {
    return (
      <Anchor route="profile" params={{ username }}>
        {Component}
      </Anchor>
    )
  }
  return Component
}

export type AvatarProps = {
  size?: Size
  user?: User
  linked?: boolean
} & MuiAvatarProps

[oliviertassinari]

What I mean is that you should concatenate the class name coming from the AvatarGroup with the new one you inject.