DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for ReactJS: How to customize styles of Material UI AutoComplete Dropdown
Labeeb Ahmad
Labeeb Ahmad

Posted on

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.

Top comments (1)

Collapse
 
usmanhassan profile image
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.

🌚 Life is too short to browse without dark mode