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

Question

我正在使用 material-ui (v 4.9.5) 的 Popper 实现“弹出”菜单，如上所示。它的anchorElement是左侧选定的ListItem。 我希望Popper与主菜单顶部对齐。但它似乎短了5像素。 如果我查看 Chrome Dev Tools，我会看到以下内容，translate3d参数中的5px值是问题所在。如果我在 Dev Tools 中将该值更改为0px，问题就解决了。

我的问题是如何通过代码实现这一点。我已经尝试了以下方法，使用底层的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'
},
}}

- Simon Long

---

如果您可以分享代码，或者更好地尝试在codesandbox中重现此问题，我会尽力帮助您。 - Sabbin

Answer 1

Material UI 5.0及以上版本使用的是Popper 2.0，其语法略有不同。

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

- ScarpMetal

Answer 2

使用popperOptions属性，将选项对象提供给popper.js实例，方法如下：

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

- Snehal Baghel

---

嗯，这很奇怪。也许尝试更新 material-ui？我使用的是 4.9.9 版本，x 和 y 偏移都能正常工作。 - Snehal Baghel

尝试修改器: { 偏移量: { 启用: true, 偏移量: '-5,0', }, } - Charlie Ng

Answer 3

这是在Material Ui popper组件中添加偏移量的最快方法。

  <Popper
        open={open}
        anchorEl={anchorRef.current}
        modifiers={{
          flip: {
            enabled: false,
          },
          offset: {
            enabled: true,
            offset: '300,100',
          },
        
      >

更多信息请参见MUI和popper.js。

- Ice_mank