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

Question

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

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

我该怎么做？

Answer 1

一种方法是调整 elevation 使用的 Paper 组件的 Autocomplete。默认高程为 1。下面的示例通过在自定义 Paper 组件 (CustomPaper) 中指定该值来使用值 8，该组件然后通过 {{1} 的 PaperComponent 属性提供}.

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" /> )} /> ); } 属性没有给您想要的外观，您可以通过 elevation 的 classes 属性自定义 Paper 组件的样式，如下例中使用出于演示目的非常丑陋的边框，但您可以使用相同的方法进行任何您想要的 CSS 更改。

Autocomplete