如何使用 renderOption 在自动完成 material ui 中设置列​​表选项的样式？

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 只需将 renderOption prop 中的 option.title 更改为 option 即可。并使用 Box 而不是 div 来应用样式。

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

因此，由于您已经将 option.title 字符串数组传递给 options，因此您需要像 renderOption prop.option 中那样引用它们。

MUI 组件使用 sx 属性。所以请将 div 更改为 renderOption 内的 MUI Box 组件。 Box 是专门创建的 for such cases.