Reputation: 21
for some of you this should be an easy one. I am trying to change the background colour of my autocomple from black to white. Its looks like this right now:
So I want to change the background colour of the result. The code looks like this rn:
<Autocomplete
id="combo-box-demo"
options={mitarbeiter}
classes={{
option: styles.option
}}
onChange={changer}
getOptionLabel={(option) => option.email}
fullWidth
style={{width: 350}}
renderInput={(params) => <TextField {...params} label="Mitarbeiter" variant="outlined" style={{ backgroundColor: "cyan !important" }}/>}
required
/>
Thanks in advance
Upvotes: 0
Views: 2691
Reputation: 46
Autocomplete
component has a prop named PaperComponent
. You can change background of results using it.
Here I am passing a Paper
component inside PaperComponent
prop and setting its background
to yellow
.
My results list will 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
/>
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.
Upvotes: 2