Reactjs 反应物料界面网格列问题

我正在使用React应用程序。对于样式，我使用的是材质UI库

我从一个打开的API获取数据，并将数据传递到子组件中，然后将其呈现给子组件。我想在一行的三列卡片中显示它们。我已经尝试了很多基于材料UI文档的方法，但都没有成功

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import moment from "moment";
const useStyles = makeStyles(theme => ({
  gridRoot: {
    flexGrow: 1
  },
  paper: {
    width: "390px",
    height: "200px",
    textAlign: "center",
    padding: "30px",
    borderRadius: "25px"
  },
  subText: {
    fontWeight: "fontWeightMedium",
    paddingBottom: "3px",
    fontSize: "18px",
    fontFamily: "Roboto Condensed"
  }
}));

function HeroCard({ districts, source, date }) { // This is props 
  const classes = useStyles();
  return (
    <React.Fragment>
      <Grid container className={classes.gridRoot} spacing={2}>
        <Grid item xs={12}>
          <Grid container spacing={2}>
            <Grid item xs spacing={2}>
              <Paper className={classes.paper}> //This is my Hero card.
                <Typography className={classes.subText}>
                  Health care district: {districts ? districts : "Unknown"}
                </Typography>
                <Typography className={classes.subText}>
                  Infection source of country: {source ? source : "Unknown"}
                </Typography>
                <Typography className={classes.subText}>
                  Date of infected: {moment(date).format("LLLL")}
                </Typography>
              </Paper>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </React.Fragment>
  );
}

export default HeroCard;

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Grid”导入网格；
从“时刻”中导入时刻；
const useStyles=makeStyles（主题=>({
gridRoot：{
flexGrow:1
},
论文：{
宽度：“390px”，
高度：“200px”，
textAlign：“居中”，
填充：“30px”，
边界半径：“25px”
},
潜台词：{
fontWeight：“fontWeightMedium”，
填充底部：“3px”，
字体大小：“18px”，
fontFamily：“机器人浓缩”
}
}));
函数HeroCard（{地区，来源，日期}）{//这是道具
const classes=useStyles（）；
返回(
//这是我的英雄卡。
保健区：{区？区：“未知”}
国家感染源：{来源？来源：“未知”}
感染日期：{时刻（日期）.format（“LLLL”）}
);
}
导出默认卡；

据我所知，您提供的代码是HeroCard，您希望所有HeroCard都以3列的网格格式显示。

应该包装所有heroCard，而不是每个heroCard。为了实现这一点，我遵循了源代码

这将是接收数据并将其传递给组件的父组件：

从“React”导入React；
从“/path/to/HeroCard”导入HeroCard；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
常数数据=[
{id:0，地区：“利马”，资料来源：“新冠病毒-19”，日期：“2020年3月18日”}，
{id:1，地区：“Miraflores”，日期：“2020年3月18日”}，
{id:2，地区：“圣伊西德罗”，日期：“2020年3月18日”}，
{id:3，地区：“Surquillo”，日期：“2020年3月18日”}
];
函数App（）{
返回(
{data.map（（卡片）=>(
))}
);
}
导出默认应用程序；

HeroCard组件的外观如下所示：

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“时刻”中导入时刻；
const useStyles=makeStyles（（主题）=>({
论文：{
//宽度：390，//禁用宽度，使卡响应
身高：200，
textAlign：“居中”，
填充：theme.spacing（3），//30，//建议边距和填充使用theme.spacing
边界半径：25
},
潜台词：{
fontWeight：“fontWeightMedium”，
填充底部：3，
尺码：18，
fontFamily：“机器人浓缩”
}
}));
功能卡（{地区、来源、日期}）{
const classes=useStyles（）；
返回(
保健区：{区？区：“未知”}
国家感染源：{来源？来源：“未知”}
感染日期：{时刻（日期）.format（“LLLL”）}
);
}
导出默认卡；

一些注意事项和个人建议：

• 使用此选项，以便您和其他阅读您的代码的人了解每个组件接收的道具类型。这只是众多好处之一
• Mui将高度：200转换为高度：“200px”

---

祝你好运！：）

你不知道。你帮了我多少忙。非常感谢现在提出的另一个问题，我的手机版本也显示了三列卡片，看起来很糟糕。如何在手机版中显示一张卡？我在材料界面中寻找媒体查询，但没有找到任何好的解决方案。你能帮帮我吗？很高兴我帮了你。我强烈建议您在实施之前阅读并尝试了解大多数事情是如何工作的。网格组件使用5个断点。您可以指示每个网格项在每个断点处应具有的列宽大小，如下所示：

，更多信息（请注意标记为

xs=12 sm=6

的项如何调整到600px以下）。有关断点的更多信息。也谢谢。原来我的问题是，我使用的管理模板有自己的网格系统，我把它误认为是材料用户界面。问题解决了。穆乔·格雷西亚斯