时间戳

首页 > 解决方案 > BlueprintJS 覆盖/门户未正确关闭

blueprintjs - BlueprintJS 覆盖/门户未正确关闭

问题描述

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

叠加层：

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

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

标签： blueprintjs

解决方案

我解决了这个问题，为了让内容显示在屏幕中间，我使用了覆盖类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
`;

推荐阅读