如何在不删除自动完成中的选择的情况下禁用 Material-UI 中的下划线?
How can I disable underline in Material-UI without removing the selection in Autocomplete?
我想用 TextField
组件创建 Autocomplete
不带下划线。我在 TextField
道具中使用 InputProps={{ disableUnderline: true }}
禁用了下划线,它完成了它的工作,但它也删除了 selection 栏,所以问题是,我如何在不删除 select吧?
要再次启用下拉列表,您也需要在嵌套的 属性 (InputProps
) 中展开所有提供的属性。所以替换这一行
<TextField {...params} InputProps={{ disableUnderline: true }} />
与:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
完整的工作代码:
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>
现场演示
我想用 TextField
组件创建 Autocomplete
不带下划线。我在 TextField
道具中使用 InputProps={{ disableUnderline: true }}
禁用了下划线,它完成了它的工作,但它也删除了 selection 栏,所以问题是,我如何在不删除 select吧?
要再次启用下拉列表,您也需要在嵌套的 属性 (InputProps
) 中展开所有提供的属性。所以替换这一行
<TextField {...params} InputProps={{ disableUnderline: true }} />
与:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
完整的工作代码:
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>