视口中的中心弹出框

Question

我应该如何将 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"
  },

Answer 1

还有另一种方法可以做到这一点：

Popove 已经有一个包含 popover 内容Div的元素fixed，因此我们可以给它指定样式，并将anchorReference设为none。

import React from 'react';
import {
  makeStyles,
  Popover,
} from '@material-ui/core';

const useStyles = makeStyles (theme => ({
  popoverRoot: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

const CenteredPopOver = ({open}) => {
  const classes = useStyles();

  return (
    <Popover
      open
      anchorReference={"none"}
      classes={{
        root: classes.popoverRoot,
       }}
    >
      // what ever should be in the popover
      <div>I am in the center</div>
    </Popover>
  )
}

对于 MUI v5 @JJL 有一个很好的解决方案：

<Popover
  open
  anchorReference={"none"}
  sx={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }} >
   // what ever should be in the popover
   <div>I am in the center</div>
</Popover>

Answer 2

您可以在其后面制作一个全屏弹出层，就像模态通常具有的那样。制作一个固定位置的div，宽度为100vw，高度为100vh。然后将其用作锚元素。您必须根据需要隐藏和显示它。