如何解决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
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。