如何更改Material-UI Autocomplete列表的样式？

Question

我想要更改Material-UI中Autocomplete组件列表/下拉菜单（不是输入框）的样式。我使用material-styles进行样式设计。

我希望可以通过增加盒子阴影使这个列表在背景中更加显眼。

我应该怎么做呢？

- Mimoid

Answer 1

通过调整由Autocomplete使用的Paper组件的elevation，可以实现这一点。默认值为1。下面的示例使用8的值，在自定义的Paper组件(CustomPaper)中指定该值，并通过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 属性来自定义 Paper 组件的样式。以下示例使用一个非常丑陋的边框来演示，但你可以使用同样的方法进行任何 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" />
      )}
    />
  );
}

- Ryan Cogswell

---

有没有什么好的方法来为那篇论文中的列表添加样式？我使用了弹出组件，但它导致了我的应用程序中的严重内存泄漏。谢谢。 - Richardson

@Connective-tissue 请创建您自己的问题，以便您可以充分描述您的问题并展示您尝试过的代码。 - Ryan Cogswell

@Rayan Cogswell，我的问题与代码相关 https://dev59.com/824NtIcB2Jgan1znX4JD - Richardson

Answer 2

我们现在可以通过在主题中进行以下操作来更改纸张的高度或其他默认属性：

MuiAutocomplete: {
  defaultProps: {
    slotProps: {
      paper: {
        elevation: 6
      }
    }
  }
}

- Frank Egan