重现步骤
链接到实时示例： https://codesandbox.io/p/sandbox/mui-container-query-wtzlg5?file=%2Fsrc%2FDemo.tsx
步骤：
- 勾选 "禁用门户" 复选框
- 点击 "打开弹出窗口" 按钮
当前行为
当设置了 disablePortal 标志时，弹出窗口位置错误。
预期行为
无论设置了哪个 disablePortal 标志，弹出窗口都应该定位在同一位置。
上下文
在我们的应用程序中，有一个可重用的表单字段组件，它根据可用大小使用容器查询来实现不同的布局。一些表单字段使用 MUI Popover 组件，例如在日期输入字段中显示日历。
你的环境
npx @mui/envinfo
System:
OS: macOS 14.3.1
Binaries:
Node: 19.6.0 - ~/.nvm/versions/node/v19.6.0/bin/node
npm: 9.5.0 - ~/.nvm/versions/node/v19.6.0/bin/npm
pnpm: 8.6.12 - ~/.nvm/versions/node/v19.6.0/bin/pnpm
Browsers:
Chrome: 121.0.6167.184
Edge: Not Found
Safari: 17.3.1```
</details>
**Search keywords**: mui popover inline size disableportal
4条答案
按热度按时间lfapxunr1#
在上面的代码沙箱示例中，您可以看到弹出窗口被容器外的顶部填充量完全偏移。由于CSS容器似乎创建了一个新的堆叠上下文，因此弹出窗口容器(
.MuiPopover-root)不再覆盖整个屏幕，而只覆盖容器：编辑：因此，这也影响了外部的点击处理程序
8yoxcaq72#
感谢您的反馈。看起来Material UI Popover组件的位置计算没有考虑到容器的布局。如果容器的类型不是
normal,那么定位应该相对于容器而不是窗口。在未来，Popover可能会被Popup from Base UI取代，它在内部使用Floating UI,并在其计算中考虑包含块。以下是一个示例，展示了Base UI Popup如何正确处理内联大小容器的定位：https://stackblitz.com/edit/vitejs-vite-pvnhbj?file=src%2FApp.tsx。
不过我会将其标记为一个bug。
gupuwyp23#
你好，
.当'禁用门户'选项未选中时，弹出窗口(simple-popover)作为我们应用程序(#root)的直接子元素和兄弟元素呈现在body中。
.当'禁用门户'选项被选中时，弹出窗口(simple-popover)紧挨着'打开弹出窗口'按钮。"
请查看附件中的图片。
这就是为什么".presentation/simple-popover"没有占据窗口的全部宽度的原因。
vfh0ocws4#
这就是为什么 ".presentation/simple-popover" 没有占据窗口的全部宽度。
即使它被渲染为子元素，它的尺寸也是
position: fixed,并且相对于容器定位。如果没有容器，它会根据position: fixed相对于浏览器窗口进行定位。