Как сместить позицию Material-UI Popper (библиотека popper. js) на оси Y? - PullRequest
Новая
       60

Как сместить позицию Material-UI Popper (библиотека popper. js) на оси Y?

2 голосов
/ 01 апреля 2020

enter image description here

Я использую Material-UI (v 4.9.5) Popper для всплывающего меню, как указано выше. Это anchorElement, выбранный ListItem слева. Я хочу, чтобы Popper показывался flu sh в верхней части главного меню. Однако он выглядит на 5px меньше.

Если я посмотрю на Chrome Dev Tools, я увижу следующее, и значение 5px в параметрах translate3d является проблемой. Если я изменю значение на 0px в Dev Tools, проблема будет решена.

enter image description here

Мой вопрос: как мне добиться, чтобы это произошло через код. Я попробовал следующее, используя modifiers для основного поппера. 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'
},
}}

enter image description here

1 Ответ

2 голосов
/ 05 апреля 2020

Используйте опцию popperOptions для предоставления параметров obj для popper. js экземпляр, например, так: 

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