我正在使用与 Material UI react ，
我在一个数组中有 40 张动态卡片，当我渲染它们时，我希望连续有 3 张卡片，并且我将所有卡片放在一列中。
我正在使用这张卡:
https://codesandbox.io/s/r084q99q34

请您参考如下方法:

也许你可以使用 Flexbox ？我遇到了同样的问题，由于 FlexBox 槽 Material ui，我解决了它。另外，请务必使用优于或等于 4 的 Material 核心版本。希望它有所帮助!

import React from 'react' 
import { makeStyles } from '@material-ui/core/styles' 
import { 
    Grid, 
    Card, 
    CardContent, 
    Typography, 
    CardHeader 
} from '@material-ui/core/' 
 
const useStyles = makeStyles(theme => ({ 
    root: { 
        flexGrow: 1, 
        padding: theme.spacing(2) 
    } 
})) 
 
export default function AltCard() { 
    const classes = useStyles() 
    const data = [ 
        { quarter: 1, earnings: 13000 }, 
        { quarter: 2, earnings: 16500 }, 
        { quarter: 3, earnings: 14250 }, 
        { quarter: 4, earnings: 19000 } 
    ] 
    return ( 
        <div className={classes.root}> 
            <Grid 
                container 
                spacing={2} 
                direction="row" 
                justify="flex-start" 
                alignItems="flex-start" 
            > 
                {data.map(elem => ( 
                    <Grid item xs={12} sm={6} md={3} key={data.indexOf(elem)}> 
                        <Card> 
                            <CardHeader 
                                title={`quarter : ${elem.quarter}`} 
                                subheader={`earnings : ${elem.earnings}`} 
                            /> 
                            <CardContent> 
                                <Typography variant="h5" gutterBottom> 
                                    Hello World 
                                </Typography> 
                            </CardContent> 
                        </Card> 
                     </Grid> 
                ))} 
            </Grid> 
        </div> 
    ) 
}