小编Mar*_*ore的帖子

我应该如何将 React Material-UI Popover 在视口中居中？

我的应用程序是基于 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 会以该锚元素为中心。但是，我应该使用什么元素在视口中居中？

如果不明显，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"
  },