How do you position Material UI Popper in the bottom right corner of the browser?

Question

I'm using Material UI v4.9.1. They have a Popper React component, based on Popper.js v1.14.1.

• https://material-ui.com/api/popper
• https://popper.js.org/docs/v1

I'm trying to render a small square card on the bottom right corner of my browser.

With plain CSS, I think I would have to do this.

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

I was trying to do that with the Popper component, but I'm not sure how. This is what I have now.

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

I'm setting anchor = document.body when the user clicks a button. I've also set

html, body {
    width: 100%;
}

in my root index.html.

However, when the Popper appears it's in the top right corner. The div has this style set.

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

What am I missing?

Solution 1

check offset

<Popper
  className='popper-root'
  open={open}
  anchorEl={anchorEl}
  placement='bottom-end'
  modifiers={{
    offset: {
    enabled: true,
    offset: '0, 30'
   }
  }}
>

Solution 2

You can try to set css on Popper.

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

But this may not be the best solution, maybe you should write the component yourself, because this feature doesn't seem complicated, it may not be necessary to use Popper.