依次显示材料ui卡

Question

我试图在映射循环中显示卡片，也使用类似的网格。

<div className={classes.root}>
{data.tableData.childRows.map((el: any, idx: number) => {
return (
<Grid
container
spacing={2}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item xs={3}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography color="textPrimary" gutterBottom>
Name: {data.name}
</Typography>
<Typography color="textPrimary">
Email: {data.email}
</Typography>
<Typography color="textPrimary">
Gateway: {el.gateway}
</Typography>
<Typography color="textPrimary">
ID: {el.id}
</Typography>
<Typography color="textPrimary">
Created: {el.creationDate}
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
onClick={() => {
alert("button clicked" + data.email);
}}
>
Action
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
);
})}
</div>

我的风格是

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
padding: theme.spacing(2),
},
}));
const classes = useStyles();

但是卡片被可视化为一张在另一张的顶部并向左对齐。如何在一行中显示等间距的卡片？

Answer 1

您的父div元素需要有display: flex才能使它们内联可视化。尝试下方的代码

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
padding: theme.spacing(2),
display: 'flex'
}
}));
const classes = useStyles();

如果你想了解更多关于flexbox的信息，请在下面的链接上查看漂亮的指南。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你试过这个吗？

<Grid
container
spacing={2}
direction="row"
justify="space-between"
alignItems="center"
>

Answer 3

对相应的小屏幕或大屏幕使用xs和xl来渲染网格中相邻的卡。

示例

<Grid xs={4}>    
</Grid>