javascript - 在 GroupAvatar 中，我的 "max"头像不遵守我的主题规则

Question

我正在尝试使用 MaterialUi 创建一个 AvatarGroup，我所有的头像都遵循以前创建的样式。

全部，除了在定义“max”参数时由 AvatarGroup 自动生成的头像。 :(

    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>
    );
  } 

它给了我这个: GroupAvatar with last avatar too big

如您所见，最后一个头像 (+4) 比其他头像大得多。

您可以使用 React 在 stackblitz.com 等网站上测试代码: stackblitz where you can test project

这里是导入

    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';

如何让我的头像“+4”与其他头像一样大？

Answer 1

针对AvatarGroup 的avatar 规则名称而不是单个Avatar 组件

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