[Select] Override MenuProps default props
See original GitHub issueHello,
I need to override some default classes and props for my application, however it seems that it’s not working very well for nested component.
I want to override the default props of MenuProps
object inside the Select
component, so I tried to do something like this:
MuiSelect: {
autoWidth: true,
variant: "outlined",
MenuProps: {
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
transformOrigin: {
vertical: "top",
horizontal: "right",
},
},
},
The autoWidth
and variant
props are applied, but the nested object MenuProps
isn’t, do you know if I have done something wrong ?
My Mui-version is 4.7.2
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
[Select] Override MenuProps default props #18881 - GitHub
I want to override the default props of MenuProps object inside the Select component, so I tried to do something like this: MuiSelect:...
Read more >How to override Material UI Select component MenuProps ...
I want to change all my Material UI Select component's dropdown menu style with createTheme, but it doesn't work. enter image description ...
Read more >Select API - Material UI - MUI
Name Type Default
autoWidth bool false
children node
classes object
Read more >API - React Select
Select Props. These base props are those available to be passed to all select variants. ... The possible settings are: off, polite (default)...
Read more >A complete guide to React default props - LogRocket Blog
Cover three ways to implement default props in React and provide default values for props that are not required by the component.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’m not sure we should change the behavior. I think that it’s more intuitive to have it behave like regular default props. Thanks for raising!
Ok my bad, I think I figured out what my problem was, my component was declared like so:
But by declaring some props inside this
MenuProps
object, it seems that the component doesn’t search for props overrides in theme ?I want to achieve this because I need to set a marginTop on the
paper
class in order to get the result in the Sandbox belowHere is a sandbox:
https://codesandbox.io/s/amazing-voice-r8zez?fontsize=14&hidenavigation=1&theme=dark If you uncomment the MenuProps declaration in the
App
component, default props overridden in theme won’t be applied anymore, what I expected is that if I define props manually, they should override the default props overridden, but it doesn’t seem to be the case.