删除 react material ui 组件中自动完成的下划线样式

Question

我想删除下划线样式并在文本字段在 React 的自动完成组件中获得焦点时更改下划线样式 material ui.

我似乎找不到要覆盖的样式。

提前致谢。

Answer 1

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

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

或

<AutoComplete underlineShow={false}>

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

Answer 2

只是为 material v1 添加另一个答案。在 v1 中，我们必须针对文本字段内的输入。为了删除或设置下划线样式

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

Answer 3

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

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

删除 react material ui 组件中自动完成的下划线样式

Removing underline style of autocomplete in react material ui component

javascript

css

reactjs

material-ui