隐藏 Material UI Grid item 并让下一个 Grid Item 滑入它的位置答案

【问题标题】：Hide Material UI Grid item and let next Grid Item slide into its position隐藏 Material UI Grid item 并让下一个 Grid Item 滑入它的位置
【发布时间】：2021-08-26 06:29:35
【问题描述】：

我正在尝试创建一个需要隐藏一些文本字段的表单。但是，如果我试图在带有 display: none 的 Grid 容器内隐藏一个 Grid 项，则下一个网格项不会滑到第一个网格项的位置。它只是创建了这个空白。

我该如何解决这个问题？

https://codesandbox.io/s/hide-grid-items-1v7u3

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您应该隐藏网格而不是输入。因为如果你只隐藏输入网格仍然占据这个位置

  <Grid item md={4} style={{ display: "none" }} xs={12}>
          <TextField label="Firstname"  />
  </Grid>

【讨论】：

【解决方案2】：

要在 MaterialUI 中隐藏元素或组件，有 Hidden 组件可以根据断点和隐藏实用程序切换组件的可见性

看看这个sn-p

<Grid container>
  <Hidden mdUp>
    <Grid item md={4} xs={12}>
      <TextField label="Firstname"/>
   </Grid>
  </Hidden>
</Grid>

很直观，从“md”断点开始，网格项目将被隐藏。查看文档Hidden MaterialUI。

【讨论】：

对于任何要隐藏的代码块或组件，您只需将其包装在隐藏组件中