javascript - 如何在 y 轴上偏移 Material-UI Popper(popper.js 库)位置？

Question

我正在使用 Material UI (v 4.9.5) Popper对于上面的“弹出”菜单。它是 anchorElement是选中的ListItem在左边。
我想要 Popper与主菜单顶部齐平。但是它看起来短了 5px。

如果我查看 Chrome 开发工具，我会看到以下内容和 5px translate3d 中的值参数是问题。如果我将值更改为 0px在开发工具中，问题得到解决。



我的问题是如何通过代码实现这一点。我使用 modifiers 尝试了以下操作对于基础 popper.js 它什么也不做。

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

更奇怪的是，如果我尝试这样的事情并尝试 modifiers 的 x 轴它沿 x 轴移动。 为什么 x 轴有效而 y 轴无效？

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

Answer 1

使用 popperOptions prop 为 popper.js 实例提供选项 obj ，如下所示:

<Popper
   popperOptions={{
      modifiers: {
         offset: {
             offset: '-5,0',
         },
      },
    }}
    ....
</Popper>