材质UI自动完成渲染选项

Question

我正在尝试创建一个材质用户界面自动完成功能，该功能显示两个用“ |”分隔的字段并右对齐。我尝试了不同的方法并检查了文档，但找不到任何解决方案。谢谢您的帮助。

Answer 1

renderOption={(option: any, state) => {(
    <ListboxItem selected={state.selected}>
      <span>{option.field1} | {option.field2}</span>
    </ListboxItem>
)}

使用renderOption构建自定义选项，确保ListboxItem有对应的样式。要制作自定义输入，请使用 renderInput。