Reactjs 如何更改材质UI自动完成列表的样式？

我想更改材质UI中自动完成组件的列表/下拉列表（而不是输入）的样式。 我正在使用材质样式进行造型

我希望这个列表在背景中更清晰可见，这样可以增加框阴影

---

如何执行此操作？

执行此操作的一种方法是调整

自动完成所使用的
纸张
组件的
标高。默认高程为1。下面的示例通过指定自定义
纸张
组件（
自定义纸张
）中的值8，该组件随后通过
自动完成
的
纸张组件
属性提供

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


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