我应该如何在视口中将React Material-UI弹出窗口居中?
我的应用基于Next.js框架构建,而Next.js框架又基于React构建。(我在下面包含了package.json的完整依赖项。)
我有一个元素,当它被单击时打开一个弹出窗口:
<Popover
id="video-popover"
open={Boolean(video)}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center'
}}
>
<video controls autoPlay src={`/static/${video}`}>
Your browser does not support the
<code>video</code> element.
</video>
</Popover>
字符串
我想让视频在视图中居中。
通常我会设置Popover元素的anchorEl属性,然后Popover就会在这个anchor元素上居中。但是,我应该使用什么元素来在视口中居中呢?
如果不太明显,onClick处理程序会将state.video设置为要播放的视频的文件名。onClose处理程序会将state.video设置为null。如果需要我上传更多的JSX代码,请告诉我,但我很确定这与Popover在视口上的居中无关。
以下是我的依赖项:
"dependencies": {
"@material-ui/core": "^3.6.2",
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-icons": "^3.2.2"
},
型
2条答案
按热度按时间e0bqpujr1#
还有另一种方法:
Popove已经有一个
fixed
位置的Div
元素,它包含了popover内容,所以我们可以给予样式,并将anchorReference
设置为none
。字符串
而对于MUI v5@JJL有一个很好的解决方案:
型
doinxwow2#
你可以在它后面做一个全屏弹出层,就像modal通常做的那样。做一个固定位置的div,宽度为100 vw,高度为100 vh。然后用它作为你的锚元素。你需要隐藏和显示它。