我正在使用Material UI v4.9.1。他们有一个基于 Popper.js v1.14.1 的PopperReact 组件。
- https://material-ui.com/api/popper
- https://popper.js.org/docs/v1
我正在尝试在浏览器的右下角渲染一个小的方形卡片。
使用普通的CSS，我想我必须这样做。
.card {
position: 'fixed';
bottom: 0;
right: 0;
}
我试图用Popper组件做到这一点，但我不确定如何做到这一点。这就是我现在所拥有的。
<Popper
open={anchor !== null}
placement="bottom-end"
anchorEl={anchor}
popperOptions={{positionFixed: true}}
modifiers={{
// I think I need some modifier?...
}}
>
{/* card component */}
</Popper>
我正在设置用户单击按钮时anchor = document.body。我还设置了
html, body {
width: 100%;
}
在我的根index.html.
但是，当Popper出现时，它位于右上角。div有这个样式集。
position: fixed;
top: 0px;
left: 0px;
transform: translate3d(1164px, 5px, 0px);
will-change: transform;
我错过了什么？
检查偏移量
<Popper
className='popper-root'
open={open}
anchorEl={anchorEl}
placement='bottom-end'
modifiers={{
offset: {
enabled: true,
offset: '0, 30'
}
}}
>
您可以尝试在Popper上设置 css。
<Popper
open={anchor !== null}
style={{ position: 'fixed', bottom: 0, right: 0, top: 'unset', left: 'unset' }}
>
{/* card component */}
</Popper>
但这可能不是最好的解决方案，也许你应该自己编写组件，因为这个功能看起来并不复杂，可能没有必要使用Popper.
只需删除anchorEl={anchor}道具或将其设置为未定义，popper内容将是<body>标签的子项，请仔细检查disablePortal道具(默认为假((遵循官方文档：https://material-ui.com/api/popper/#props(。
希望这有帮助！
如果机身下方没有足够的空间来绘制波普尔，则波普尔可能会出现在顶部取芯器中。它可能正在环绕并出现在顶部。尝试将身高设置为 50%，看看它是否出现在它下方。
Using @mui/x-date-pickers"： "^6.5.0" 在插槽道具中添加
popper: {
placement: "bottom",
},