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
      />

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.

Comments

[Usman Hassan]

Is it possible to style the children props individually, lets say you want each item on the dropdown to have a different color.

[Collin MacDonald]

Thanks a lot for this one, Labeeb! I was wracking my brain for a while this morning trying to figure out how to change the width of options in our AutoComplete components.