当文本字段在react材料 ui 的自动完成组件中获得焦点时，我想删除下划线样式并更改它的颜色。
我似乎找不到要覆盖的样式。
提前致谢。
在react材料 ui 组件中删除自动完成的下划线样式
IT技术
javascript
css
reactjs
material-ui
2021-05-26 11:13:57
3个回答
对@Liem 回复的小更新。只是InputProps直接覆盖InputProps它默认使用的，这会破坏组件。通过disableUnderline与 other合并InputProps，它应该可以工作。
<Autocomplete
renderInput={
params =>
<TextField
{...params}
InputProps={{...params.InputProps, disableUnderline: true}}
/>
}
/>
只是为材料 v1 添加另一个答案。在 v1 中，我们必须以文本字段内的输入为目标。为了删除或设置下划线的样式
<TextField
defaultValue="hello"
InputProps={{
disableUnderline: true
}}
/>
您可以使用<TextField/>呈现给<AutoComplete/>组件的props来完成此操作。因为<AutoComplete />使用<TextField/>你可以访问那些props。因此，您实际上有两种方法可以删除自动完成的下划线。不幸的是，这在用于自动完成的 Material-UI 文档中没有记录。
<AutoComplete underlineStyle={{display: 'none'}}>
或者
<AutoComplete underlineShow={false}>
编辑：此答案与旧版本的 Material UI 相关。此答案不适用于 1.0 或更高版本。