你如何在浏览器的右下角放置 Material UI Popper？

Question

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

• 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在用户单击按钮时进行设置。我也设置了

<Popper
    open={anchor !== null}
    placement="bottom-end"
    anchorEl={anchor}
    popperOptions={{positionFixed: true}}
    modifiers={{
        // I think I need some modifier?...
    }}
>
    {/* card component */}
</Popper>

在我的根index.html。

但是，当它Popper出现在右上角时。在div具有这种风格集。

html, body {
    width: 100%;
}

我错过了什么？

Answer 1

检查偏移量

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

Answer 2

你可以尝试把css设置一下Popper。

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

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