在反应材料ui组件中删除自动完成的下划线样式

Question

我希望删除下划线样式,并在文本字段在反应材料ui的自动完成组件中获得焦点时更改它的颜色.

我似乎无法找到要覆盖的样式.

提前致谢.

Answer 1

对@Liem 回复的小更新。只是InputProps直接覆盖InputProps它默认使用的，这会破坏组件。通过disableUnderline与 other合并InputProps，它应该可以工作。

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

Answer 2

只需为材料v1添加另一个答案.在v1中,我们必须在文本字段内定位输入.为了删除或设置下划线

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

Answer 3

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

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

或者

<AutoComplete underlineShow={false}>

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