How to change styles of Material-UI Autocomplete list?

Question

I want to change styles of list/dropdown (not the input) of Autocomplete component in Material-UI. I'm using material-styles for styling.

I would like this list to be more visible from the background so maybe increase the box-shadow.

How can I do this?

Answer 1

One way of doing this is by adjusting the elevation of the Paper component used by Autocomplete. The default elevation is 1. The example below uses a value of 8 by specifying that in a custom Paper component (CustomPaper) which is then provided via the PaperComponent prop of Autocomplete.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Paper from "@material-ui/core/Paper";

const CustomPaper = (props) => {
  return <Paper elevation={8} {...props} />;
};
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      PaperComponent={CustomPaper}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

If the elevation prop does not give you the look you want, you can customize styles of the Paper component via the classes prop of Autocomplete as in the example below which uses a very ugly border for demonstration purposes, but you can make whatever CSS change you want to make using the same approach.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  paper: {
    border: "5px solid black"
  }
});
export default function ComboBox() {
  const classes = useStyles();
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      classes={{ paper: classes.paper }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}