如何自定义材料ui选择

Question

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

如果我在输入(from(中写1，它会选择以1开头的选项，而不是在输入中写，如果没有一个选项以输入中输入的数字开头，那么它会在输入中写入

Answer 1

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

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