如何样式列表选项在自动完成材料ui与使用renderOption?

Question

我正在努力自定义自动完成列表中的选项元素。我想通过使用renderOptions道具来做到这一点，在那里我可以创建DOM元素。然后，我可以很容易地添加样式与sx或样式组件。

但是有些地方不对劲。当我尝试渲染选项列表元素包装在div，电影的名称隐藏(?)它们被渲染，因为我仍然可以选择选项，之后它被显示为选中，但输入列表仍然是破碎的，CSS样式不应用。

我错过了什么?自动补全和它的样式对我来说是新的。

代码:

<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderOption={(props, option) => {
return (
<li {...props}>
<div
sx={{
backgroundColor: "red",
color: "orange"
}}
>
{option.title}
</div>
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: "search"
}}
/>
)}
/>
</Stack>
);
}

下面是演示:https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js

Answer 1

TL;DR只要在renderOptionprop中将option.title改为option。使用Box而不是div来应用样式。

我在文档中找不到明确的说明，但显然传递给options的每个元素都作为option参数传递给renderOption。

所以既然你已经将option.title字符串数组传递给options，你将需要将它们引用为renderOptionprop中的option。

sxprop由MUI组件使用。所以请将div更改为renderOption内的MUIBox组件。Box是专门为这种情况创建的。