CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
JiN
JiN

Reputation: 828

Removing underline style of autocomplete in react material ui component

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.

Upvotes: 12

Views: 17191

Answers (3)

rfestag
rfestag

Reputation: 2008

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}}
       />
   }
 />

Upvotes: 34

CaseyC
CaseyC

Reputation: 1482

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.

Upvotes: 2

Liem
Liem

Reputation: 770

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
    }}
/>

Upvotes: 18

Related Questions