[Menu] Remove MenuItem dependency on ListItem

A 4px margin was added to the top and bottom of ListItemText in https://github.com/mui-org/material-ui/pull/15339, causing an inconsistency between items that use it and items that just have a string child.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The MenuItems in this JSX render with different heights when the viewport width >= 600:

    <MenuList>
      <MenuItem style={{ backgroundColor: "green" }}>
        without ListItemText
      </MenuItem>
      <MenuItem style={{ backgroundColor: "red" }}>
        <ListItemText>with ListItemText</ListItemText>
      </MenuItem>
    </MenuList>

When the viewport is narrower than 600px, a media query deactivates and their minHeight becomes 48px (ironically causing them to get taller on narrower screens…)

Expected Behavior 🤔

The menu items are the same height, like they used to be

Steps to Reproduce 🕹

https://codesandbox.io/s/blazing-resonance-oqiso?file=/src/Demo.js

Context 🔦

Discovered this working on material-ui-popup-state demos.

Your Environment 🌎

Refer to code sandbox for versions

[oliviertassinari]

@jedwards1211 Ok, thanks for the extra information. I think that we will need to revamp the List and Menu implementation in v5. One element that has came up is that it’s not a good idea to share the same style for both. So I think that we need to stop using this MenuItem > ListItem inheritance.

[oliviertassinari]

@siriwatknp I think that we will always need different components for rendering a list item, a menu item, and maybe a listbox item (select). Because it works in Material Design with the same component doesn’t mean it will work in most design systems. I would definitely encourage 2 without any dependency on the list.