如何将 Material UI Popper 定位在浏览器的右下角？答案

【问题标题】：How do you position Material UI Popper in the bottom right corner of the browser?如何将 Material UI Popper 定位在浏览器的右下角？
【发布时间】：2020-05-24 02:36:31
【问题描述】：

我正在使用 Material UI v4.9.1。他们有一个Popper React 组件，基于 Popper.js v1.14.1。

我正在尝试在浏览器的右下角呈现一个小方形卡片。

使用纯 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;

我错过了什么？

【问题讨论】：

标签： javascript css reactjs material-ui popper.js

【解决方案1】：

检查offset

<Popper
  className='popper-root'
  open={open}
  anchorEl={anchorEl}
  placement='bottom-end'
  modifiers={{
    offset: {
    enabled: true,
    offset: '0, 30'
   }
  }}
>

【讨论】：

【解决方案2】：

你可以尝试在Popper上设置css。

<Popper
    open={anchor !== null}
    style={{ position: 'fixed', bottom: 0, right: 0, top: 'unset', left: 'unset' }}
>
    {/* card component */}
</Popper>

但这可能不是最好的解决方案，也许你应该自己编写组件，因为这个功能看起来并不复杂，可能没有必要使用Popper。

【讨论】：

【解决方案3】：

如果主体下方没有足够的空间来绘制 Popper，它可能会出现在顶部去核器中。它可能会环绕并出现在顶部。尝试将你的身高设置为 50%，看看它是否出现在它下方。

【讨论】：

【解决方案4】：

只需移除anchorEl={anchor} prop 或将其设置为undefined，popper 内容将是<body> 标签的孩子，请仔细检查disablePortal prop（默认为false）（遵循官方文档：https://material-ui.com/api/popper/#props）。

希望对您有所帮助！

【讨论】：