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

Question

我想改变自动完成组件的列表/下拉(而不是输入)的样式，在资料-UI。我用的是材料风格的造型。

​

​

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

我该怎么做？

Answer 1

其中一种方法是调整elevation使用的Paper组件的Autocomplete。下面的示例通过指定自定义Paper组件(CustomPaper)中的值来使用8，然后通过Autocomplete的PaperComponent支柱提供该组件。

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

​

​

如果elevation支柱没有给您提供您想要的外观，您可以像下面的示例一样通过Autocomplete的classes支柱定制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" />
      )}
    />
  );
}

​

​