ReactJS: How to customize styles of Material UI AutoComplete Dropdown

labeebahmad203

Labeeb Ahmad

Posted on May 11, 2021

ReactJS: 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 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
      />
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
labeebahmad203
Labeeb Ahmad

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