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

Question

我正在使用 material-ui (v 4.9.5) Popper作為“彈出”菜單，如上所述。 它的anchorElement是左邊選中的ListItem 。 我希望Popper與主菜單的頂部齊平。 但是它看起來短了 5px。

如果我查看 Chrome 開發工具，我會看到以下內容，並且translate3d參數中的5px值是問題所在。 如果我在開發工具中將值更改為0px ，問題就解決了。

我的問題是如何通過代碼實現這一點。 我已經嘗試使用底層popper.js 的modifiers進行以下操作，但它什么也沒做。

 <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道具向 popper.js 實例提供選項 obj ，如下所示：

<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