CODEWITHSUNDEEP
reactjsautocompletematerial-ui
LEON
LEON

Reputation: 21

How can you change the background colour of material-ui/lab/Autocomplete

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:

picture

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

Answers (1)

labeeb
labeeb

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

Related Questions