在 GroupAvatar 中,我的 "max" 头像不遵守我的主题规则
in a GroupAvatar, my "max" Avatar does not obey the rules of my theme
我正在尝试使用 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”与其他头像一样大?
针对 AvatarGroup
的 avatar
规则名称而不是单个 Avatar
组件
<AvatarGroup max={4} classes={{avatar: classes.avatar}}>
我正在尝试使用 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”与其他头像一样大?
针对 AvatarGroup
的 avatar
规则名称而不是单个 Avatar
组件
<AvatarGroup max={4} classes={{avatar: classes.avatar}}>