Removing underline style of autocomplete in react material ui component

Question

I want to remove the underline style and change the of the color of it when the text field gets focus in the autocomplete component of react material ui.

I can't seem to find the style to override.

Thanks in advance.

http://www.material-ui.com/#/components/auto-complete Have a look at the simple example.. I don't want that underline on the textfield.. Rather i want to use my own custom style. — JiN, May 02 '17 at 11:02

rfestag · Answer 1 · 2020-05-13T22:21:10.273

33

Minor update to @Liem's response. Just putting the InputProps directly overwrites the InputProps it would use by default, which breaks the component. By merging the disableUnderline with the other InputProps, it should work.

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

edited May 13 '20 at 22:21

answered Feb 16 '20 at 23:47

rfestag

1,913
10
20

2

Thank you! This should be the accepted answer as of Material-UI v4.9.11 – joshkarges Jun 16 '20 at 17:21
This '...params.InputProps' was what I was missing from other answers. Thx! – Pedro Schmitt Jun 04 '21 at 15:02
This worked, the key point is that I needed to pass the ...params.InputProps to the InputProps property. Thanks for pointing this out. – ChivalrousRoot Oct 24 '22 at 06:12

score 18 · Answer 2 · answered Oct 20 '17 at 08:47

Just adding another answer for material v1. In v1 we have to target the input inside the text field. in order to remove or style the underline

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

CaseyC · Accepted Answer · 2019-02-11T20:54:21.047

2

You can accomplish this using the <TextField/> props that are rendered to the <AutoComplete/> component. Because <AutoComplete /> uses the <TextField/> you have access to those props. So you actually have two ways of removing the underline of the autocomplete. Unfortunately this is undocumented in the Material-UI docs for autocomplete.

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

or

<AutoComplete underlineShow={false}>

edit: This answer is relevant to older versions of Material UI. This answer does not work for version 1.0 or higher.

edited Feb 11 '19 at 20:54

answered May 05 '17 at 19:13

CaseyC

1,453
14
23

this is probably for an old material-ui version, refer to @Liem answer – Hugo Gresse Feb 10 '19 at 10:55

Removing underline style of autocomplete in react material ui component

3 Answers3

Linked