如何在 y 轴上偏移 Material-UI Popper（popper.js 库）位置？

Question

我正在使用 material-ui (v 4.9.5)Popper作为上面的“弹出”菜单。它anchorElement是ListItem在左侧选择的。我希望Popper与主菜单的顶部齐平。但是它看起来短了 5px。

如果我查看 Chrome Dev Tools，我会看到以下内容，参数中的5px值translate3d就是问题所在。如果我将值更改为0pxDev Tools 中的值，问题就解决了。

我的问题是如何通过代码实现这一点。我已经尝试了以下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>

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

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

Answer 1

Material UI 5.0 及更高版本使用 Popper 2.0，其语法略有不同。

<Popper
    modifiers={[
      {
        name: "offset",
        options: {
          offset: [0, 50],
        },
      },
    ]}
  >
  </Popper>

Answer 2

使用popperOptionsprop 向 popper.js 实例提供选项 obj ，如下所示：

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