在React Material UI组件中去除自动完成下划线样式

Question

我想在React Material UI的自动完成组件中，在文本字段获得焦点时去掉下划线并改变其颜色，但是我找不到要覆盖的样式。

提前感谢您的帮助。

- JiN

---

你能分享链接或代码吗？ - Sahil Dhir

看一下这个简单的例子...我不想在文本框中有那条下划线..相反，我想使用自己的自定义样式。 - JiN

Answer 1

对@Liem回答进行了小幅更新。直接放置InputProps会直接覆盖默认的InputProps，这会破坏组件。将disableUnderline与其他InputProps合并，应该就可以解决问题。

<Autocomplete
   renderInput={
     params => 
       <TextField 
         {...params} 
         InputProps={{...params.InputProps, disableUnderline: true}}
       />
   }
 />

- rfestag

---

谢谢！自Material-UI v4.9.11起，这应该是被接受的答案。 - joshkarges

这个“...params.InputProps”是其他答案中我所缺少的。谢谢！ - Pedro Schmitt

这个方法可行，关键是我需要将...params.InputProps传递给InputProps属性。感谢您指出这一点。 - ChivalrousRoot

Answer 2

针对 Material v1，我想再添加一个答案。在v1中，我们需要选定文本框内的输入内容，以便去除或样式化下划线。

<TextField       
    defaultValue="hello"       
    InputProps={{
       disableUnderline: true
    }}
/>

- Liem

Answer 3

您可以使用渲染到<AutoComplete/>组件的<TextField/>属性来实现此操作。因为<AutoComplete />使用<TextField/>，所以您可以访问这些属性。因此，您实际上有两种方法可以删除自动完成的下划线。不幸的是，在Material-UI文档中未对此进行记录。

<AutoComplete underlineStyle={{display: 'none'}}>

或者

<AutoComplete underlineShow={false}>

编辑：此答案与旧版Material UI相关。此答案不适用于1.0版本或更高版本。

- CaseyC

---

这可能是旧的material-ui版本，参考@Liem的答案。 - Hugo Gresse