BlueprintJS Overlay/Portal 未正确关闭

Question

我是 Blueprint 的新手，但我有一个使用 BP 的非常简单的叠加实现。我遇到的问题是，用户点击后台后，门户不是'going away'。内容消失，并且出于所有目的，叠加层似乎已关闭，但您根本无法与该页面进行交互。

叠加层：

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

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

Answer 1

我解决了这个问题，我用 height: 100vh 覆盖了 class 到 display: flex，以便让内容显示在屏幕中间。这样，container/portal 就覆盖了它后面的内容。只需将高度设置为 0 并进行过渡即可使其很好地过渡并解决问题：

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

BlueprintJS Overlay/Portal 未正确关闭

BlueprintJS Overlay/Portal not closing properly

blueprintjs