我正在使用 React 和 Material UI,
我在一个数组中有 40 张动态卡,当我渲染它们时,我想要连续 3 张卡,并将所有卡放在一列中。
我正在使用这张卡:https://codesandbox.io/s/r084q99q34 https://codesandbox.io/s/r084q99q34
也许你可以使用 Flexbox ?我遇到了同样的问题,并且通过 FlexBox 槽材料 ui 解决了它。另外,请务必使用优于或等于4的材料核心版本。希望它有帮助!
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>
)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)