Как вы размещаете Material UI Popper в правом нижнем углу браузера? - PullRequest
Новая
       49

Как вы размещаете Material UI Popper в правом нижнем углу браузера?

1 голос
/ 08 февраля 2020

Я использую Material UI v4.9.1. Они имеют компонент Popper React, основанный на Поппере. js v1.14.1.

Я пытаюсь отобразить небольшую квадратную карточку в правом нижнем углу браузера.

С простым CSS, думаю, мне придется сделать this. 

.card {
    position: 'fixed';
    bottom: 0;
    right: 0;
}

Я пытался сделать это с компонентом Popper, но я не уверен, как. Это то, что у меня сейчас. 

<Popper
    open={anchor !== null}
    placement="bottom-end"
    anchorEl={anchor}
    popperOptions={{positionFixed: true}}
    modifiers={{
        // I think I need some modifier?...
    }}
>
    {/* card component */}
</Popper>

Я устанавливаю anchor = document.body, когда пользователь нажимает кнопку. Я также установил 

html, body {
    width: 100%;
}

в моем root index.html.

Однако, когда появляется Popper, он находится в верхнем правом углу. div имеет этот набор стилей. 

position: fixed;
top: 0px;
left: 0px;
transform: translate3d(1164px, 5px, 0px);
will-change: transform;

Что мне не хватает?

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020

Поппер может появиться в верхнем ядре, если под телом недостаточно места для его рисования. Это может быть обтекание и появление наверху. Попробуйте установить свой рост на 50% и посмотрите, появится ли он под ним.

0 голосов
/ 08 февраля 2020

Вы можете попробовать установить css на Popper. 

<Popper
    open={anchor !== null}
    style={{ position: 'fixed', bottom: 0, right: 0, top: 'unset', left: 'unset' }}
>
    {/* card component */}
</Popper>

Но это может быть не лучшим решением, может быть, вам следует написать компонент самостоятельно, потому что эта функция не кажется сложной , возможно, нет необходимости использовать Popper.

...