Z-индекс в меню Поппера? - PullRequest
Новая
       10

Z-индекс в меню Поппера?

0 голосов
/ 16 октября 2018

У меня есть песочница, воспроизводящая эту проблему здесь .

Что я пытаюсь сделать, это сделать меню «сидеть ниже», как продемонстрировано в документации Material-UI. 

   return (
      <div className={classes.root}>
        <div>
          <Button
            buttonRef={node => {
              this.anchorEl = node;
            }}
            aria-owns={open ? "menu-list-grow" : null}
            aria-haspopup="true"
            onClick={this.handleToggle}
          >
            Toggle Menu Grow
          </Button>
          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
            {({ TransitionProps, placement }) => (
              <Grow
                {...TransitionProps}
                id="menu-list-grow"
                style={{
                  transformOrigin:
                    placement === "bottom" ? "center top" : "center bottom"
                }}
              >
                <Paper>
                  <ClickAwayListener onClickAway={this.handleClose}>
                    <MenuList>
                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                    </MenuList>
                  </ClickAwayListener>
                </Paper>
              </Grow>
            )}
          </Popper>
        </div>

        <Button color="default" variant="contained">
          {" "}
          I'm a button that sits under the menu
        </Button>
      </div>
    );

У меня проблема в том, что кнопка под меню всегда находится сверху.

Я пытался вручную добавить zIndex в различные части меню - но безрезультатно.

Я подозреваю, что проблема связана с переходом.

Может кто-нибудь объяснить, что здесь происходит, и как бы я решил это?

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Как предложено @Ricovitch, удалите атрибут disablePortal из элемента Popper или установите для него значение false <Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>

Как показано, это пример, когда disablePortalfalse, всплывающий элемент присоединяется к элементу body, что, кстати, является поведением по умолчанию.Например, ваша HTML-структура будет выглядеть следующим образом: 

<body>
    ... existing elements ...
    <parent>
        <button />
    </parent>
    ... more elements ...
    ... attached popup menu ...
</body>

Однако, если вы установите disablePortal в true, она будет иметь следующую HTML-структуру: 

<body>
    ... existing elements ...
    <parent>
        <button />
        ... attached popup menu ...
    </parent>
    ... more elements ...
</body>

Надеюсь, это поможет!

0 голосов
/ 19 октября 2018

Измененные рабочие коды andbox: https://codesandbox.io/s/4qvzkplzl4

Я только что удалил опору disablePortal на компоненте Поппера: 

<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>

Становится 

<Popper open={open} anchorEl={this.anchorEl} transition>

См. Материал-Подписывание пользовательского интерфейса для компонента Popper 'disablePortal' здесь: https://material -ui.com / api / popper / # props

Отключить поведение портала.Дети остаются в родительской иерархии DOM.

По умолчанию компонент Popper использует React Portal API: https://reactjs.org/docs/portals.html

Порталы предоставляют первоклассный способвизуализировать дочерние элементы в узле DOM, который существует вне иерархии DOM родительского компонента

Используя API React Portal, компонент Material-UI Popper по умолчанию визуализируется вне иерархии DOM родительского дерева, этообъясните, почему это решает проблему с наложением.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...