材质 UI 弹出框 - 小屏幕上的位置

Question

一段时间以来，我一直在尝试找出一种方法来将材质 ui 弹出框放置在我的锚点下方，并且即使在较小的屏幕上也始终保持这种状态。

这是一个沙盒示例：https://codesandbox.io/s/material-demo-yvcqu?file=/demo.js

这是我得到的最好的，但此时滚动并没有真正在身体上，而是在弹出容器div上，这对我没有帮助。

只是为了解释一下，我知道我可以将AnchorElement 与位置一起使用，但在较小的屏幕上，弹出框只会隐藏Anchor，我希望弹出框始终位于其下方，并让正文滚动，所以当我向下滚动时，我可以看到完整的弹出框内容。

import React from "react";
import {makeStyles,MuiThemeProvider,createMuiTheme} from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Button from "@material-ui/core/Button";

export default function SimplePopover() {
    const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const theme2 = createMuiTheme({
    overrides: {
      MuiButton: {
        root: {
          top: 400
        }
      },
      MuiPopover: {
        root: {
        },
        paper: {

          height: 500
        }
      }
    }
  });
  return (
    <div>
      <MuiThemeProvider theme={theme2}>
      <Button
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
         Open Popover with anchor
      </Button>
      <Popover
        id="popover-with-anchor"
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
       Popover content.
   </Popover>
   </MuiThemeProvider>
    </div>
  );
}

例如图像。当弹出框比屏幕大时，它会自动进入屏幕并越过锚点

而不是在锚下

Answer 1

有趣的是Popover 组件没有处理这种情况的属性。当我在弹出窗口中有很长的数据列表时，我在较小的设备上遇到了类似的问题。为了解决这个问题，我自己在Popover 组件的PaperProps 属性上设置了top。见下文：

<Popover PaperProps={{ style: { top: myAnchor.current ? myAnchor.current.getBoundingClientRect().bottom : 0 } }}></Popover>

Answer 2

不要在root 上使用overflow: scroll。相反，请在 paper 上执行 overflowY: auto。

See codesandbox 和玩。

试试这个：

overrides: {
      MuiPopover: {
        root: {
          // overflow: "scroll"
        },
        paper: {
          left: 50,
          top: "500px !important",
          height: 50,
          overflowY: "auto"
        }
      }
    }