How to build a full-width mega-menu using Material-UI? - reactjs

Question

Currently, my component looks like this:
<Menu
id="customized-menu"
className={classes.root}
anchorEl={blogMenuAnchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
transformOrigin={{ vertical: 'top', horizontal: 'center' }}
open={blogMenu}
onClose={closeBlogDropDown}
>
<MenuItem>
<ListItemText primary="Latest Posts" />
</MenuItem>
<Divider variant="fullWidth" />
<MenuItem>
<ListItemText primary="Learn French" />
</MenuItem>
<MenuItem>
<ListItemText primary="Learn Latin" />
</MenuItem>
<MenuItem>
<ListItemText primary="Learn Italian" />
</MenuItem>
</Menu>
);
This drop-down, of course, shrinks to fit the items it lists. However, what if I want the drop-down to be full-width? They call it a mega menu, I suppose. I tried adding a width: '100%' to the component's style but it had no effect because the actual drop-down div gets generated at runtime, to which I have no access during scripting.
The repo is up at https://github.com/amitschandillia/proost/tree/master/web_SO and the component in question is https://github.com/amitschandillia/proost/blob/master/web_SO/components/BlogDropDown.jsx.
REFERENCE: Here's an image of what I'm looking to emulate:

Answer 1

You need to change the Popover paper width to 100% (the drop down is actually a popover):
const styles = (theme) => ({
popoverPaper: {
width: '100%',
height: '100%',
maxHeight: 'unset',
maxWidth: 'unset',
},
});
And than apply the style to popover paper:
<Menu
PopoverClasses={{paper: props.classes.popoverPaper}}
id="customized-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
>
You can check this CodeSandbox example: https://codesandbox.io/s/material-demo-fmy64?fontsize=14

Answer 2

For benefit of people who came here because of google search.
The props needed if you want the full width ( like a mega menu ) is with the following minimum settings of marginThreshold and PaperProps. These are props which will be pass to Popover API.
<Menu
anchorEl={anchorEl}
marginThreshold={0}
PaperProps={{
style: {
width: "100%",
maxWidth: "100%",
left: 0,
right: 0,
}
}}
anchorOrigin={{ vertical: "bottom" }}
transformOrigin={{ vertical: "top" }}>
fork of the selected answer