[SelectMenu] CSS API's 'selectMenu' maps to the same element as 'select'

[psylithic]

When using the classes property on the Select component, both selectMenu and select's values are added to the same element.

So in the following example, both foo and bar are both applied to the select div and the menu pop-up does not have either.

<Select=classes{{ select: 'foo' select-menu: 'bar' }}> </Select

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The values set for 'select' and 'selectMenu' should be set on different elements.

Current Behavior

Mentioned above.

Steps to Reproduce (for bugs)

1. Navigate to https://codesandbox.io/s/3x4pn95336
2. Inspect the drop-down and note that it has both foo and bar classes.

Context

Creating a dropdown that requires some CSS tweaks to match what UIUX asked for. Optimally, I would like a property that lets me set a class for the List component that contains the drop down menu's items.

Your Environment

Tech	Version
Material-UI	v1.0.0
React	16.3.2

[oliviertassinari]

@psylithic You are right. We do such in order to share the CSS code between the NativeSelect and Select component. selectMenu is only used for the non native implementation. It's a tradeoff. But thanks for raising this limitation. Ideally, we could not document selectMenu existence.

[emirotin]

This is still the case and I think it was not before v4 as we've got some of our components styles broken.

I think this behavior is
a) superfluous,
b) backward-incompatible (which is fine given the major release but as far as I've noticed not mentioned anywhere in the docs),
c) not logical as it would make more sense to get it assigned to the Menu used for the select's options.

Of course, it'd be fine if the class was only used internally.