How to change styles of Material-UI Autocomplete list?

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" />
      )}
    />
  );
}