[Menu] Does not add margin if the first item is a `Divider`

[dimitropoulos]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

see https://codesandbox.io/s/iconmenu-demo-material-ui-forked-i2xk9i for a code example.

Today, by an error of a CSS selector (in my opinion), a Divider will not get correct margin-bottom (and thus be very close to the first MenuItem).

This bug has two causes based on the selector (https://github.com/mui/material-ui/blob/master/packages/mui-material/src/MenuItem/MenuItem.js#L115) used:

1. the style is appended to MenuItem not Menu
2. the style uses the + CSS selector which means it will only select dividers placed immediately after menu items. in the case of a divider being first, though, this will never match.

Expected behavior 🤔

BEFORE	AFTER

There should be a margin bottom for the first item if it is a Divider.

Steps to reproduce 🕹

Steps:

1. Create a Menu and add a Divider before any MenuItem.

Context 🔦

Consider the case of a UI that has divided menu items like this from Insomnia:

In this kind of UI, it's very common to have a divider beginning a menu item list.

Your environment 🌎

The docs. See link above.

[mnajdova]

As there is no such things as previous sibling selector, we would need to add these styles in the MenuList component (which up until now didn't have any styles). However, before we do that, I would wait to see if the issue will get some traction. If it doesn't then we can consider this with not common scenario and you can add the style on your end.