使用材质 UI 时 Grid 中的问题答案

【问题标题】：Problems in Grid when using material UI使用材质 UI 时 Grid 中的问题
【发布时间】：2021-08-03 03:43:38
【问题描述】：

您好，我正在尝试使用材质 UI 构建卡片集

const CardFeatures = () => {

const [features, setFeatures] = useState([
    { title: 'Feature 1', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Assignment />, id: 1 },
    { title: 'Feature 2', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Autorenew />, id: 2 },
    { title: 'Feature 3', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Bookmark />, id: 3 },
    { title: 'Feature 4', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Bookmark />, id: 4 },
])

const useStyles = makeStyles((theme) => ({
    root: {
        minWidth: 275,
        marginTop: theme.spacing(7),
        marginBottom: theme.spacing(7),
        borderRadius: 16,
        elevation: 'FF0000',
        boxShadow: 'rgb(140 152 164 / 25%) 0px 3px 6px 0px'

    },
    title: {
        fontSize: 16,
        marginLeft: theme.spacing(2),
        fontWeight: "bold"
    },
    description: {
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(2),
        fontSize: 22,
        marginBottom: theme.spacing(2),
        color: '#808080'
    },
    green: {
        color: '#fff',
        backgroundColor: green[500],
        width: theme.spacing(6),
        height: theme.spacing(6),
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(2),
        marginBottom: theme.spacing(2)
    }
}));


const classes = useStyles();

return (
    <div>
        {features.map(feature => (

            <Card className={classes.root} key={feature.id} elevation='0'>
                <CardContent>
                    <Avatar aria-label='recipe' className={classes.green}>{feature.icon} </Avatar>
                    <Typography className={classes.title} color='textPrimary' gutterBottom>
                        {feature.title}
                    </Typography>
                    <Typography className={classes.description}>
                        {feature.body}
                    </Typography>
                </CardContent>
            </Card>
        ))}
    </div>
);
}

export default CardFeatures;

结果是这样的：

而不是这个：

P.S.：第二张图片手动编码

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

如果您希望卡片并排显示，则需要在父 div 上使用 display: flex 或 display: grid。

使用 flex，你可以在 useStyles

中添加一个类

container: {
  display: 'flex',
  flexWrap: 'wrap'
}

然后把这个类传给父div

<div className={classes.container}>
    {features.map(feature => (
        <Card className={classes.root} key={feature.id} elevation='0'>
            <CardContent>
                <Avatar aria-label='recipe' className={classes.green}>{feature.icon} </Avatar>
                <Typography className={classes.title} color='textPrimary' gutterBottom>
                    {feature.title}
                </Typography>
                <Typography className={classes.description}>
                    {feature.body}
                </Typography>
            </CardContent>
        </Card>
    ))}
</div>

【讨论】：

首先感谢您的回答，我很感激，但我仍然有同样的问题

【解决方案2】：

我试过这个，它对我有用

 <Grid container spacing={3}>
                {features.map(feature => (
                    <Grid item xs={12} md={6} lg={4}>
                        <Card className={classes.root} key={feature.id}>
                            <CardContent>
                                <Avatar className={classes.green}>{feature.icon} </Avatar>
                                <Typography className={classes.title} color='textPrimary' gutterBottom>
                                    {feature.title}
                                </Typography>
                                <Typography className={classes.description}>
                                    {feature.body}
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                ))}
            </Grid>

我用容器包裹了地图，并用网格包裹了卡片，它工作了

【讨论】：