BlueprintJS 叠加层/门户未正确关闭

问题描述

我是 Blueprint 的新手，但我有一个使用 BP 的非常简单的叠加实现。我遇到的问题是，在用户单击背景后，门户并没有“消失”。内容消失了，无论出于何种目的，叠加层似乎都已关闭，但您根本无法与页面进行交互。

叠加层：

<Overlay isOpen={open === 'error'} onClose={onClose} >
    <Card>
        There was an error.
    </Card>
</Overlay>

onClose 只是将 open 值设置为空字符串。

解决方法

我解决了这个问题，为了让内容显示在屏幕中间，我将覆盖类设置为 display: flex 和 height: 100vh。这样，容器/门户就覆盖了它背后的内容。只需将高度设置为 0 w/一个过渡就可以很好地过渡并解决问题：

const StyledOverlay = styled(Overlay)`
    display: flex;
    justify-content: center;
    align-items: center;
    height: ${props => props.isOpen ? '100vh' : 0};
    transition: height 250s
`;