React Material UI: How to prevent the Popover component overlay the screen when Menu component opens?

Viewed 3502

I am using Menu component to show up a menu when user hovers on an element. However, I noticed that when the menu opens up it also contains a Popover component that opens up and covers the entire screen as an overlay thus preventing interaction with the screen. I do not want the overlay to open when I open the Menu component. How can I achieve this?

1 Answers

The Menu Component inherits from Popover, which inherits from Modal. So all Modal props are also available to Menu. The ones that might help you;

  • hideBackdrop: If true, the backdrop is not rendered.
  • disableScrollLock: Disable the scroll lock behavior.

More at https://material-ui.com/api/modal/ .

Related