如何在 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>更奇怪的是，如果我尝试并尝试这样的事情并尝试 x 轴，modifiers它会沿 x 轴移动。为什么 x 轴有效而 y 轴无效？modifiers={{   offset: {    enabled: true,    offset: '0, 50'},}}

Answer 1

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

<Popper

   popperOptions={{

      modifiers: {

         offset: {

             offset: '-5,0',

         },

      },

    }}

    ....

</Popper>

Answer 2

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

<Popper

    modifiers={[

      {

        name: "offset",

        options: {

          offset: [0, 50],

        },

      },

    ]}

  >

  </Popper>

Answer 3

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

  <Popper

        open={open}

        anchorEl={anchorRef.current}

        modifiers={{

          flip: {

            enabled: false,

          },

          offset: {

            enabled: true,

            offset: '300,100',

          },

        

      >

参考这里了解更多信息 MUI popper.js