Question

您好，我正在尝试使用材质 UI 构建卡片组，我已经对来自 javascript 对象的数据进行了排序，但是当我编译时，结果不是我要查找的结果，这是我正在使用的代码。

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.：第二张图片手动编码

Answer 1

如果您希望卡片并排显示，则需要在父 div 上使用 display: flex OR 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>

Answer 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>

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

使用材质 UI 时 Grid 中的问题

2 个答案: