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

【问题标题】：How do I offset Material-UI Popper (popper.js library) position on y-axis?如何在 y 轴上偏移 Material-UI Popper（popper.js 库）位置？
【发布时间】：2020-04-01 15:59:34
【问题描述】：

我正在使用 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'
},
}}

【问题讨论】：

如果您可以分享代码，或者最好尝试在代码沙盒中重现此问题，我会尽力帮助您

标签： javascript css reactjs material-ui popper.js

【解决方案1】：

使用 popperOptions 属性为 popper.js 实例提供选项 obj，如下所示：

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

【讨论】：

嗯，这很奇怪。尝试更新材料-ui 可能吗？我在 4.9.9 上，x 和 y 偏移都为我工作。
尝试修饰符：{ offset: { enabled: true, offset: '-5,0', }, }

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：