移除 React Material ui 组件中自动完成的下划线样式

Posted 2023-02-21

【中文标题】移除 React Material ui 组件中自动完成的下划线样式

【英文标题】：Removing underline style of autocomplete in react material ui component

【发布时间】：2017-09-29 21:03:38

【问题描述】：

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

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

提前致谢。

【问题讨论】：

可以分享链接或代码吗？

material-ui.com/#/components/auto-complete 看看这个简单的例子。我不想在文本字段上加下划线。而是我想使用我自己的自定义样式。

【参考方案1】：

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

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

【讨论】：

谢谢！这应该是 Material-UI v4.9.11 的公认答案

这个 '...params.InputProps' 是我在其他答案中所缺少的。谢谢！

【参考方案2】：

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

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

【参考方案3】：

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

<AutoComplete underlineStyle=display: 'none'>

或

<AutoComplete underlineShow=false>

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

【讨论】：

这可能是旧的material-ui版本，参考@Liem回答