提问者:小点点

在react material ui组件中删除autocomplete的下划线样式


我想删除下划线样式,并改变它的颜色,当文本字段在react material UI的自动完成组件中获得焦点时。

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

提前道谢。


共3个答案

匿名用户

您可以使用呈现给组件的道具来完成此操作。因为使用,所以您可以访问这些属性。所以实际上有两种方法可以去除自动完成的下划线。不幸的是,这是没有记录在材料UI文档的自动完成。

<自动完成下划线式={{display:'none'}}>

<自动完成下划线Show={false}>

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

匿名用户

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

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

匿名用户

对@liem的响应进行了小更新。只需放置inputprops就会直接覆盖它默认使用的inputprops,这会破坏组件。通过将disableunderline与其他inputprops合并,它应该可以工作。

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