Material-UI Grid不会隐藏使用显示

Question

我想使用MUI网格https://material-ui.com/api/grid/，并且如果屏幕很小，我想隐藏一个项目Grid，所以我找到了一个名为Display https://material-ui.com/system/display/的东西。我的代码看起来像这样

function CRUDView() {
  return (
    <Grid
      container
      spacing={1}
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Grid item xs={12} lg={6}>
        <span>XX</span>
      </Grid>
      <Grid item xs={6} display={{ xs: "none", lg: "block" }} >
        <span>YY</span>
      </Grid>
    </Grid>
  );
}

我不明白为什么它不起作用（文本YY仍然出现）。不能将显示与Grid一起使用吗？如果是，那为什么？

Answer 1

材料UI公开了<Hidden>组件以实现此目的。只需将要隐藏的组件包装为特定的屏幕尺寸即可：

      <Hidden xsDown >
          <p>Hide me on XS view port width.</p>
      </Hidden>

您可以在documentation中找到更多示例。

Answer 2

Grid组件不会自动支持style functions。

利用样式功能的最简单方法是使用Box component。 Box组件使所有样式功能（例如display）可用。 Box组件具有component prop（默认为div），以支持使用Box向其他组件添加样式功能。

Grid组件也有一个component prop，因此您可以拥有一个将其呈现委托给一个Grid的{​​{1}}或一个委托的Box到Box。

下面的示例（基于您的代码）展示了同时使用Grid和Box的两种方式。

Grid

Answer 3

网格项只需设置布局即可。

它们实际上什么也不显示。 MUI显示选项用于隐藏特定元素。

尝试一下：

function CRUDView() {
  return (
    <Grid
      container
      spacing={1}
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Grid item xs={12} lg={6}>
        <span>XX</span>
      </Grid>
      //removed from the below Grid Item
      <Grid item xs={12} lg={6}>
        <span display={{ xs: "none", lg: "block" }}>YY</span>
      </Grid>
    </Grid>
  );
}

即使网格仍然存在，这也会隐藏单独的span元素。