如何更改 Material-UI 自动完成列表的样式？

Question

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

我希望这个列表在背景中更明显，所以可能会增加框阴影。

我怎样才能做到这一点？

Answer 1

这样做的一种方式是通过调整elevation的的Paper所用组件Autocomplete。默认高程为 1。下面的示例通过在自定义Paper组件 ( CustomPaper) 中指定该值来使用值 8，然后通过 的PaperComponentprop提供该值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" />
      )}
    />
  );
}

如果elevationprop 没有给你你想要的外观，你可以通过classesprop自定义 Paper 组件的样式，Autocomplete如下例所示，为了演示目的，它使用了一个非常丑陋的边框，但你可以进行任何你想要的 CSS 更改使用相同的方法。

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