admin管理员组文章数量:1026989
I want to create Autoplete
with TextField
ponent without underline. I have disabled underline using InputProps={{ disableUnderline: true }}
in TextField
props, it did its job, but it also removed the selection bar, so the question is, how can I acplish this without removing the select bar?
I want to create Autoplete
with TextField
ponent without underline. I have disabled underline using InputProps={{ disableUnderline: true }}
in TextField
props, it did its job, but it also removed the selection bar, so the question is, how can I acplish this without removing the select bar?
1 Answer
Reset to default 5To enable the dropdown list again, you need to spread all provided props in the nested property too (InputProps
). So replace this line
<TextField {...params} InputProps={{ disableUnderline: true }} />
With:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
Full working code:
<Autoplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>
Live Demo
I want to create Autoplete
with TextField
ponent without underline. I have disabled underline using InputProps={{ disableUnderline: true }}
in TextField
props, it did its job, but it also removed the selection bar, so the question is, how can I acplish this without removing the select bar?
I want to create Autoplete
with TextField
ponent without underline. I have disabled underline using InputProps={{ disableUnderline: true }}
in TextField
props, it did its job, but it also removed the selection bar, so the question is, how can I acplish this without removing the select bar?
1 Answer
Reset to default 5To enable the dropdown list again, you need to spread all provided props in the nested property too (InputProps
). So replace this line
<TextField {...params} InputProps={{ disableUnderline: true }} />
With:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
Full working code:
<Autoplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>
Live Demo
本文标签:
版权声明:本文标题:javascript - How can I disable underline in Material-UI without removing the selection in Autocomplete? - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745530766a2154738.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论