Material UI Collapse 在隐藏时占用空间

Question

我正在使用 Material UI Collapse 和 React，当隐藏时它会在 UI 上提供额外的空间

<Collapse in={false}>
       //something here
</Collapse>

我没有应用任何CSS，但是给出了一些默认的CSS，例如

element.style {
    min-height: 0px;
}
.MuiCollapse-hidden {
    visibility: hidden;
}
.MuiCollapse-container {
    height: 0;
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

我面临这个问题，因为我已应用于align-items:"center"父元素，而其他元素未居中对齐，因为即使隐藏，它也会占用一些空间

Answer 1

要解决这个问题，您只需添加一个名为 unmountOnExit 的 prop。这意味着它将使该项目不显示。在这里你的可见性是隐藏的。

<Collapse in={false} unmountOnExit> //something here </Collapse>