如何使用 renderOption 在自动完成材质 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;博士只需在 renderOption 属性中将 option.title 更改为 option。并使用Box 而不是div 来应用样式。

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

因此，由于您已经将 option.title 字符串数组传递给 options，因此您需要在 renderOption 属性中将它们称为 option。

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