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

一段时间以来，我一直试图找到一种方法，将材质ui popover放置在我的锚下，并将其始终保持在更小的屏幕上

下面是一个沙箱示例：

这是我得到的最好的，但此时卷轴实际上并不在主体上，而是在popover容器

div

上，这对我没有帮助

只是为了解释一下，我知道我可以使用带有位置的

anchoreElement

，但在较小的屏幕上，popover将只隐藏

锚

，我希望popover始终位于其下方，并使主体滚动，这样我可以在向下滚动时看到完整的popover内容

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles，MuiThemeProvider，createMuiTheme}”；
从“@material ui/core/Popover”导入Popover；
从“@物料界面/核心/按钮”导入按钮；
导出默认函数simplepover（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleClick=（事件）=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
const theme2=createMuiTheme({
覆盖：{
穆伊布顿：{
根目录：{
排名：400
}
},
缪波弗：{
根目录：{
},
论文：{
身高：500
}
}
}
});
返回(
用锚打开Popover
Popover内容。
);
}

例如图像。当popover比屏幕大时，它适合屏幕并越过锚

而不是在锚下

---

不要执行

溢出：在
根目录上滚动
。相反，在
纸张上执行
溢出：自动

到处玩

试试这个：

覆盖：{
缪波弗：{
根目录：{
//溢出：“滚动”
},
论文：{
左:50,，
顶部：“500px！重要”，
身高：50，
溢出：“自动”
}
}
}
不要执行
溢出：在
根目录上滚动
。相反，在
纸张上执行
溢出：自动

到处玩

试试这个：

覆盖：{
缪波弗：{
根目录：{
//溢出：“滚动”
},
论文：{
左:50,，
顶部：“500px！重要”，
身高：50，
溢出：“自动”
}
}
}
有趣的是，
Popover
组件没有处理这种情况的属性。当我在popover中有一长串数据时，我在一个较小的设备上遇到了类似的问题。为了解决这个问题，我只需在
Popover
组件的
PaperProps
属性上设置
top
我自己。见下文：

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

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

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


我们真的不清楚您想做什么，以及到底是什么问题。请创建一个工作示例（您可以使用它）。我同意上述观点，您也可以使用提供的代码编辑器作为问题的选项。我编辑了@Dekel。添加图像以解释我试图实现的目标，并添加代码以显示problem@NathanielFlickIt他真的不清楚你想做什么，到底是什么问题。请创建一个工作示例（您可以使用它）。我同意上述观点，您也可以使用提供的代码编辑器作为问题的选项。我编辑了@Dekel。添加图像以解释我试图实现的目标，并添加代码以显示problem@NathanielFlickThis这不是我想做的。看看我发送的图像和代码这不是我想做的。看看我发送的图像，还有code@Mumfordwiz没问题，让我知道它是否适合你@Mumfordwiz没问题，让我知道它是否适合你！