How can I remove the underline of TextField from Material-UI?

css reactjs material-ui
H.Zhao picture H.Zhao · Sep 12, 2019 · Viewed 45.9k times · Source

I want the TextField to be naked(no underline) when using material-ui TextField. I do know that using InputBase from material-ui can achieve this, but I kinda need to use TextField API to achieve this but i did not find the way to do it in the API guide.

Answer

Kofi Nartey picture Kofi Nartey · Apr 13, 2020

You can also use the InputProps prop on the TextField component to achieve this by setting the disableUnderline property to true.

<TextField
  fullWidth
  placeholder="Search..."
  InputProps={{ disableUnderline: true }}
 />

Related questions

How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More
How to enlarge the SVG icon in material-ui iconButtons?

Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an "create new" component, which is a piece of material paper with a …

Read More
How to use pseudo selectors in material-ui?

I have been trying to achieve the simple thing. I was trying to show/hide my <TreeMenu/> component in the material UI v1 with pseudo selectors but somehow it does not work. Here is the code : CSS: root: { …

Read More