React Material-UI Cookbook

How it works...

Let's start by looking at the menuPaper style used in this example:

const ITEM_HEIGHT = 48;const useStyles = makeStyles(theme => ({  menuPaper: { maxHeight: ITEM_HEIGHT * 4.5, width: 200 }}));

The ITEM_HEIGHT value is an approximation of the height of each menu item. The multiplier (4.5) is an approximation of how many menu items should fit on the screen. Now, let's jump into the Menu component markup:

<Menu  anchorEl={anchorEl}  open={Boolean(anchorEl)}  onClose={onClose}  PaperProps={{    classes: { elevation8: classes.menuPaper }  }}>  {items.map((item, index) => (    <MenuItem      key={index}      selected={index === selected}      onClick={onSelect(index)}    >      {item}    </MenuItem>  ))}</Menu>

The selected property of each MenuItem component is set to ...