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

Question

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?

question from:https://stackoverflow.com/questions/65832673/react-material-ui-how-to-prevent-the-popover-component-overlay-the-screen-when

Answer 1

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/ .