在一行中渲染网格项目 - ReactJS 和 Material-UI答案

【问题标题】：Render grid items in one row - ReactJS and Material-UI在一行中渲染网格项目 - ReactJS 和 Material-UI
【发布时间】：2021-05-24 06:27:26
【问题描述】：

我想创建一个材质 ui 轮播，在同一行中显示 3 个项目。当缩小浏览器的宽度时，我希望项目仍然在一行中，并隐藏不适合的项目。

这是全屏时：

这是我想要的：

但这是我得到的：

你对我做错了什么有任何想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid>
      </Box>
    </Grid>
  </Paper>

样式

const useStyles = makeStyles((theme) => ({
  paper: {
    display: "flex",
    width: "auto",
  },
  grid: {
    width: "auto",
  },
  arrow: {
    padding: theme.spacing(3),
  },
  box: {
    padding: theme.spacing(3),
  },
}));

【问题讨论】：

应该有其他影响样式的东西，因为它在代码和框中工作codesandbox.io/s/…
@Zabzuki 您使用的屏幕分辨率是多少？
@ShivamJha 是 1920x1080

标签： reactjs flexbox material-ui css-grid react-flexbox-grid

【解决方案1】：

可以使用 Material UI 提供的 useMediaQuery 来检查是否需要渲染最后一个组件

https://material-ui.com/components/use-media-query/

【讨论】：

【解决方案2】：

在您的 Grid container 添加 wrap='nowrap' 道具。这会覆盖默认的wrap='wrap'。

<Grid
    container
    wrap='nowrap'
    // Your other props
>

说明
默认情况下，如果物品不在容器中，它们会简单地换行并移动到下一行。

使用wrap='nowrap' 属性，网格项目保持不变。

【讨论】：