如何自定义材质ui选择

【问题标题】：How customize material ui select如何自定义材质ui选择
【发布时间】：2022-01-18 14:49:10
【问题描述】：

我正在尝试自定义material-ui 下拉列表，使其成为这样的东西，这是链接https://codesandbox.io/s/busy-black-2fgdn?file=/src/App.js，

如果我在输入（从）中写入 1，它会选择以 1 开头的选项而不是写入输入，如果没有选项以输入中输入的数字开头，则它会写入输入，

【问题讨论】：

标签： reactjs material-ui dropdown customization

【解决方案1】：

使用Autocomplete 和freeSolo 作为道具。在此处查看文档 => https://mui.com/components/autocomplete/#free-solo

const dataList = [
  { title: "10-100", value: "10-100" },
  { title: "100-200", value: "100-200" },
  { title: "200-300", value: "200-300" },
  { title: "300-400", value: "300-400" }
];
...

<Autocomplete
    id="free-solo-demo"
    freeSolo
    options={dataList.map(option => option.title)}
    renderInput={params => <TextField {...params} label="select or type" />}
/>

代码沙箱 => https://codesandbox.io/s/winter-cloud-y401t?file=/src/App.js

【讨论】：