ReactJS: How to customize styles of Material UI AutoComplete Dropdown
Labeeb Ahmad
Posted on May 11, 2021
In this post I'll explain, how you can change background of Material UI dropdown. However this way you can add any other css for dropdown as well.
Autocomplete
component of Material UI has a prop
named PaperComponent
. You can change background of dropdown
using this prop
.
Here I am passing a Paper
component inside PaperComponent
prop and setting its background
to yellow
using style
prop.
My list will now be rendered inside it, and dropdown's color will be yellow
<Autocomplete
id="combo-box-demo"
options={mitarbeiter}
onChange={() => {}}
getOptionLabel={(option) => option.title}
fullWidth
PaperComponent={({ children }) => (
<Paper style={{ background: "yellow" }}>{children}</Paper>
)}
style={{ width: 350 }}
renderInput={(params) => (
<TextField
{...params}
label="Mitarbeiter"
variant="outlined"
style={{ backgroundColor: "pink !important" }}
/>
)}
required
/>
I am passing {children}
inside to make sure that list of options gets rendered there.
Here is a working example @ codesandbox https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.js
if you need to set additional styles
you can add to style prop of <Paper>
component.
Posted on May 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024