通过调整由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" />
)}
/>
);
}
MuiAutocomplete: {
defaultProps: {
slotProps: {
paper: {
elevation: 6
}
}
}
}