Material Ui Grid 无法正确缩放答案

【问题标题】：Material Ui Grid doesn't scale properlyMaterial Ui Grid 无法正确缩放
【发布时间】：2019-07-29 07:26:45
【问题描述】：

我正在尝试处理网格响应，但我无法实现我的目标，我的想法是全屏显示所有 6 列并排显示，较小的屏幕将其减少到 3 列，然后在下面再显示 3 列它。在大屏幕上它看起来很好，因为它看起来像这样：

但是，当我减小屏幕宽度时，它开始看起来像这样：

我真的不知道如何让它正常工作，我的代码：

<Grid container spacing={24} style={{ padding: 24 }}>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">Aid</StyledTypography>
      </Grid>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">
          Associated Security Domain
        </StyledTypography>
      </Grid>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">Life Cycle</StyledTypography>
      </Grid>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">Load File Aid</StyledTypography>
      </Grid>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">Version</StyledTypography>
      </Grid>
      <Grid item lg={2} md={4}>
        <StyledTypography variant="h4">Privileges</StyledTypography>
      </Grid>

      {mainData.map((el, i) => {
        return (
          <React.Fragment key={i}>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <StyledTypography variant="body1">{el.aid}</StyledTypography>
            </Grid>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <StyledTypography variant="body1">
                {el.associatedSecurityDomain}
              </StyledTypography>
            </Grid>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <StyledTypography variant="body1">
                {el.lifeCycle}
              </StyledTypography>
            </Grid>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <StyledTypography variant="body1">
                {el.loadFileAid}
              </StyledTypography>
            </Grid>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <StyledTypography variant="body1">{el.version}</StyledTypography>
            </Grid>
            <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
              <Tooltip
                title={
                  <React.Fragment>
                    {el.privileges && el.privileges.length ? (
                      el.privileges.map((el, i) => <p key={i}>{el}</p>)
                    ) : (
                      <p>None</p>
                    )}
                  </React.Fragment>
                }
                placement="top"
              >
                <Button className={classes.tooltipBtn}>
                  Hover to see Privilages
                </Button>
              </Tooltip>
            </Grid>
          </React.Fragment>
        );
      })}
</Grid>

这是我希望达到的结果：

【问题讨论】：

这正是它应该呈现的方式。你在期待什么？
我希望 Aid、Associated... 和 Life Cycle 与它们的数据一起在 3 列中，然后在所有这些数据下方，出现另外 3 列与 Load...Version 和 Privelages 及其数据。现在它看起来很乱，很难阅读
每个 Grid 项目按照定义的顺序呈现（不包括 flex reverse）。我猜您可能希望对较小的屏幕使用不同的渲染。
@Christiaan 我用我希望达到的结果更新了我的问题
但这没有意义，对吧？如果将它们分开，您将如何关联这些行？（想想 mainData 数组中有 20 个项目）

标签： reactjs grid material-ui

【解决方案1】：

为了达到你想要的效果，你必须改变小屏幕的结构。

您可以使用Material-UI 中的withWidth 或useMediaQuery 挂钩，并使用conditional rendering 呈现“桌面”或“移动”布局。

以下是移动结构的外观。不过这会包含很多重复的代码。

const SmallScreenComponent = () => (
  <Grid container spacing={24} style={{ padding: 24 }}>
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">Aid</StyledTypography>
    </Grid>
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">
        Associated Security Domain
      </StyledTypography>
    </Grid>
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">Life Cycle</StyledTypography>
    </Grid>
    {mainData.map((el, i) => {
      return (
        <React.Fragment key={i}>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <StyledTypography variant="body1">{el.aid}</StyledTypography>
          </Grid>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <StyledTypography variant="body1">
              {el.associatedSecurityDomain}
            </StyledTypography>
          </Grid>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <StyledTypography variant="body1">
              {el.lifeCycle}
            </StyledTypography>
          </Grid>
        </React.Fragment>
      );
    })}
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">Load File Aid</StyledTypography>
    </Grid>
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">Version</StyledTypography>
    </Grid>
    <Grid item lg={2} md={4}>
      <StyledTypography variant="h4">Privileges</StyledTypography>
    </Grid>
    {mainData.map((el, i) => {
      return (
        <React.Fragment key={i}>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <StyledTypography variant="body1">
              {el.loadFileAid}
            </StyledTypography>
          </Grid>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <StyledTypography variant="body1">{el.version}</StyledTypography>
          </Grid>
          <Grid item lg={2} md={4} className={classes.gpProfileGrid}>
            <Tooltip
              title={
                <React.Fragment>
                  {el.privileges && el.privileges.length ? (
                    el.privileges.map((el, i) => <p key={i}>{el}</p>)
                  ) : (
                    <p>None</p>
                  )}
                </React.Fragment>
              }
              placement="top"
            >
              <Button className={classes.tooltipBtn}>
                Hover to see Privilages
              </Button>
            </Tooltip>
          </Grid>
        </React.Fragment>
      );
    })}
  </Grid>
);

【讨论】：

是的，而且随着我拥有的大量数据，它会变得更加混乱......嗯，我想我会坚持使用旧的数据显示方式，直到我知道如何以更多方式呈现它友好的形式，无需重复太多代码，无论如何你的答案很好，所以我会标记它:) 谢谢
看看npmjs.com/package/mui-datatables。它有一些响应选项。