in a GroupAvatar, my "max" Avatar does not obey the rules of my theme

Question

I'm trying to create an AvatarGroup with MaterialUi, all my avatars obey a previously created style.

All, except the avatar automatically generated by AvatarGroup when the "max" parameter has been defined. :(

    const styles = makeStyles((theme) => createStyles({
    avatar: {
      marginRight: theme.spacing(4),
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: grey[200],
      width: theme.spacing(3),
      height: theme.spacing(3)
     }
    }))

    export default function GroupAvatars() {
    const classes = styles();
    const nameList = ['Alexandre', 'Regis', 'Leo', 'Thing', 'ola', 'que', 'tal']
    const avatarList = nameList.map(name => {
      return (<Avatar key={name}
              className={classes.avatar}
              alt={name}
            />)
    })
  
    return (
      <AvatarGroup max={4} >
        {avatarList}
      </AvatarGroup>
    );
  } 

it gives me this: GroupAvatar with last avatar too big

as you can see the last avatar (+4) is way bigger than the others.

You can test the code on website like stackblitz.com using react: stackblitz where you can test project

here are the import

    import React from 'react';
    import Avatar from '@material-ui/core/Avatar';
    import { createMuiTheme } from '@material-ui/core/styles';
    import { withStyles, WithStyles, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
    import { grey, blue } from '@material-ui/core/colors'
    import AvatarGroup from '@material-ui/lab/AvatarGroup';

how do i make my avatar "+4" the same size as the other avatars ?

Answer 1

Target the avatar rule name for AvatarGroup instead of the individual Avatar components

<AvatarGroup max={4} classes={{avatar: classes.avatar}}>