How to flip Material UI Popper when not enough space

Question

Original position original When Button moving to the left executed

https://codesandbox.io/s/material-demo-forked-hwvxl?file=/demo.js

Please tell me how to do it, thanks

Answer 1

you just add marginLeft t your paper as the same margin as your button

margins indicate how many spacing is there between elements , and it can be set in all 4 directions or on one of the axis

paper: {
    maxWidth: 400,
    minWidth: 100,
    marginLeft : 50 // here
  },
btn: {
    marginLeft: 50 // same as this
  }