DEV Community

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

        onChange={() => {}}
        getOptionLabel={(option) => option.title}
        PaperComponent={({ children }) => (
          <Paper style={{ background: "yellow" }}>{children}</Paper>
        style={{ width: 350 }}
        renderInput={(params) => (
            style={{ backgroundColor: "pink !important" }}
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

if you need to set additional styles you can add to style prop of <Paper> component.

Top comments (2)

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.

collinemac profile image
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.