为什么我的 Material UI 表在“显示”切换后隐藏

Question

我正在使用Grow 材质 ui 组件来显示/隐藏表格。默认情况下，我会看到表格。

  <Box className={classes.object_controls_wrapper}>
    <Box sx={{ display: "flex" }}>
      <Grow in={objectViewOpened}>{object_controls_view}</Grow>
    </Box>
    <FormControlLabel
        control={
          <Switch
              checked={objectViewOpened}
              onChange={handleToggleObjectViewOpened}
          />
        }
        label="Show"
    />
  </Box>

但是，在我切换显示按钮后，表格隐藏在地图后面。

父 div 的 z-index 仍然很大。

如果我在材质 UI 示例中使用该图标.. 它的可见性会正确切换并且不会以这种方式隐藏。

对于找到导致此内容隐藏的 CSS 属性，您有什么建议？

---

代码沙盒链接

根据建议..here 是我的带有三角形的代码框..在右上角显示切换..它按预期工作

Here 是带材料表的版本.. 它不起作用。

---

进一步的输入

经过进一步实验.. 问题似乎在于包装隐藏 div 的样式。在下面我显示 div 仍处于“过渡”状态。当我在开发人员工具中删除该样式时，我看到了我的组件。该过渡样式以不透明度 0 开头。我想知道这是我对 Grow 组件的误用，还是材质 ui 中的实际错误。

下面的添加好像没有清除样式

<Grow
            in={objectViewOpened}
            style={{ transformOrigin: "0 0 0" }}
            {...(objectViewOpened ? { timeout: 1000 } : {})}
          >
            {object_controls_view}
          </Grow>

这来自他们的documentation（我不完全理解那个语法）：

Answer 1

我认为它可能是地图的 z-index 或表尝试放置 100 但我不确定，并使用相对位置，并确保具有位置的表：绝对具有位置：相对的父级，主体有默认情况下相对位置，但有时您需要指定