如何在 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&nbsp; &nbsp;popperOptions={{&nbsp; &nbsp; &nbsp; modifiers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;offset: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;offset: '-5,0',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; }}&nbsp; &nbsp; ....</Popper>

Answer 2

Material UI 5.0 及更高版本使用 Popper 2.0，其语法略有不同。<Popper&nbsp; &nbsp; modifiers={[&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "offset",&nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offset: [0, 50],&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ]}&nbsp; >&nbsp; </Popper>

Answer 3

这是向 Material Ui popper 组件添加偏移的最快方法。&nbsp; <Popper&nbsp; &nbsp; &nbsp; &nbsp; open={open}&nbsp; &nbsp; &nbsp; &nbsp; anchorEl={anchorRef.current}&nbsp; &nbsp; &nbsp; &nbsp; modifiers={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flip: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offset: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offset: '300,100',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; >参考这里了解更多信息 MUI popper.js