隱藏 Material UI Grid item 並讓下一個 Grid Item 滑入其位置

Question

我正在嘗試創建一個需要隱藏某些文本字段的表單。 但是，如果我試圖將一個網格項目隱藏在帶有顯示的網格容器中：無，下一個網格項目不會滑動到第一個網格項目的位置。 它只是創建了這個空白。

我怎么解決這個問題？

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

Answer 1

您應該隱藏網格而不是輸入。 因為如果你只隱藏輸入網格仍然占據這個位置

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

Answer 2

要在 MaterialUI 中隱藏元素或組件，有一個隱藏組件，它可以根據斷點和隱藏實用程序切換組件的可見性

看看這個片段

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

這很直觀，從“md”斷點開始，網格項目將被隱藏。 查看文檔Hidden MaterialUI 。

Answer 3

對於隱藏 Grid 使用組件作為Box

組件={盒子}

從“@material-ui/core”導入{Box，Grid}；

 <Grid item lg={ 2 } sm={ 2 }
                    sx={ {
                      backgroundColor: "yellow",
                      display:{xs:'none', sm:'block',lg:'block'}
                    } }
                    component={ Box }
                     
                  >Hide on xs Screen </Grid>