材质Ui网格无法正确缩放

Question

我正在尝试处理Grid响应能力，但我无法实现我的目标，想法是全屏显示所有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>
        );
      })}

Answer 1

为了实现所需的功能，您必须更改小屏幕的结构。

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

下面是移动结构的外观。但是，这将包含很多重复的代码。

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>
);