Adjust elevation of Autocomplete.Paper
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Summary 💡
The <Autocomplete>
component hardcodes the elevation of the popup paper to 1
. We would like to change this to a higher elevation.
<Autocomplete>
allows to set the props of the listbox in the popup via ListboxProps
but not paper around the listbox.
Examples 🌈
Specification: https://material.io/design/environment/elevation.html
Motivation 🔦
We place the <Autocomplete>
component on a <Paper>
with elevation 1. Hence, the popup should be on elevation 2.
This is particularly impactful when using background colors to separate elevations instead of box-shadows. The following screenshot shows the popup looks like being on the same layer as the <Autocomplete>
itself:
Workaround
Change the styling of Autocomplete-paper
to simulate look of target elevation.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Adjust elevation of Autocomplete.Paper · Issue #26371 - GitHub
We would like to change this to a higher elevation. <Autocomplete> allows to set the props of the listbox in the popup via...
Read more >How to change styles of Material-UI Autocomplete list?
One way of doing this is by adjusting the elevation of the Paper component used by Autocomplete . The default elevation is 1....
Read more >How to Style the Material-UI Autocomplete Component
The best way to set Autocomplete height in MUI v5 is with ListboxProps: ... Setting Popper width requires a custom Paper component.
Read more >How to customize styles of Material UI AutoComplete Dropdown
In this post I'll explain, how you can change background of Material UI dropdown. However this way you can add any other css...
Read more >Autocomplete API - Material UI - MUI
Name Type Default
options * array
renderInput * func
autoComplete bool false
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
That would indeed be a great solution, @mnajdova
Duplicate of #23043