There is no way to affect the stying of the menu in a SelectField

[gausie]

Description

There is no way (via class or inline styling) to affect the styling of the popover menu in a SelectField.

menuStyle, despite looking like it might be the correct prop actually affects the underlying DropDownMenu control and not the dropdown menu itself.

Not sure how you would want this implemented so awaiting advice before making a PR.

Images & references

#4858

[Sharlaan]

Just stumbled upon same issue, trying to style the menu width....

In my humble opinion for a PR, i would play with this line in SelectField.js, renaming
style= with menuStyle= ?

[lucasbento]

@Sharlaan: That's exactly it!

Please send a PR with that change, we would be glad to review it.

cc @oliviertassinari.

[oliviertassinari]

For reference, we have #5091, #5389, #3388 and #5166 related to the overriding of the style properties. It would be good to find a coherent solution to all of those.

[danep93]

Is anyone still working on this? If not I'd like to give it a try

[mbrookes]

This was fixed by #5389. 👍

[Bagnall]

Hi, I'm new to this so could easily be wrong, but I think the intent of @gausie (correct me if I'm wrong @gausie) was to be able to control the style of the whole popover, not just the elements within it. menuStyle affects the select item itself (not the popover), selectedMenuStyle and menuItemStyle affect the entries in the popover but I think that @gausie 's request was to be able to affect the style of their ancestor (which I can only identify to you by means of its inline styles position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2000;) We too have the problem that we want to override that fixed z-index of 2000 in certain circumstances to make it higher still. If that div were to have an id or a class or if we could set inline styles for it, I think that would satisfy @gausie 's request and mine too. Is it possible to reopen this on that basis please @mbrookes ? Thanks in advance.

[mbrookes]

@Bagnall I believe you can override the z-index in the theme: http://www.material-ui.com/#/customization/themes

[Bagnall]

Hi @mbrookes thanks, that appears to do the trick. I'm now setting z-index for layer based on this: https://github.com/callemall/material-ui/blob/master/src/styles/zIndex.js