Question

8

Removing underline style of autocomplete in react material ui component

rated 0 times [ 11] [ 3] / answers: 1 / hits: 15090 / 7 Years ago, tue, may 2, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byrondonavanc

Add To Favorites

Follow

Total Points: 675

Total Questions: 107

Total Answers: 105

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

byrondonavanc questions

1 Mongoose, getting TypeError: Cannot read properties of undefined (reading 'find')

Tue, Dec 28, 21, 00:00, 2 Years ago

1 Properly handle multiple files input with Formik and React

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Puppeteer pdf page break bug

Thu, Mar 25, 21, 00:00, 3 Years ago

1 React useEffect() : Most efficient way to compare if two arrays of objects are equal

Fri, Dec 4, 20, 00:00, 4 Years ago

1 How to close dropdown on outside click NEXT.JS

Sat, Jul 25, 20, 00:00, 4 Years ago

View All

answered 7 Years ago bruno · Accepted Answer

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.