动态呈现 material-ui 卡片 - 连续

Question

我正在尝试创建一个卡片数组，但是就像在下面的沙箱中一样，即使我将网格项设置为 xs={3}，我也无法连续呈现卡片。无论我做什么，它们总是呈现在彼此下方。

工作版本：https://codesandbox.io/s/heuristic-edison-mpj94

添加了另一张地图以使其成为 2D 地图：

https://codesandbox.io/s/nifty-poincare-dl0jf?file=/src/App.js

感谢您的帮助！

Answer 1

对于您想要的输出，即 4 cards per row

代码如下：

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 = {
    name: [
      { quarter: 1, earnings: 13000 },
      { quarter: 2, earnings: 16500 },
      { quarter: 3, earnings: 14250 },
      { quarter: 4, earnings: 19000 }
    ],
    id: [1, 2, 3, 4]
  };
  return (
    <div className={classes.root}>
      {data.id.map((elem) => (
        <Grid
          container
          spacing={2}
          direction="row"
          justify="flex-start"
          alignItems="flex-start"
        >
          {data.name.map((elem) => (
            <Grid item xs={3} key={data.name.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>
  );
}

这是演示：https://codesandbox.io/s/charming-cookies-ymw7b?file=/src/App.js:0-1369

动态呈现 material-ui 卡片 - 连续

Rendering material-ui cards dynamically - in a row

grid

reactjs

material-ui