时间戳

首页 > 解决方案 > Material Ui Grid 无法正确缩放

reactjs - Material Ui 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>
        );
      })}
</Grid>

这是我希望达到的结果： 在此处输入图像描述

标签： reactjsgridmaterial-ui

解决方案

为了实现你想要的，你必须改变小屏幕的结构。

您可以使用Material-UIwithWidth中的oruseMediaQuery钩子并使用条件渲染来渲染“桌面”或“移动”布局。

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

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

推荐阅读