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

Question

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.

Just remove the `variant` attribute, it's right in [the documentation](https://material-ui.com/components/text-fields/#customized-inputs) labeled "Naked Input". — Chris W., Sep 12 '19 at 21:38
@ChrisW. The "Naked Input" example is using `InputBase` directly (not `TextField`) -- the exact solution the question mentions wanting to avoid. — Ryan Cogswell, Sep 12 '19 at 22:33

score 163 · Answer 1 · edited Feb 01 '21 at 18:26

163

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

edited Feb 01 '21 at 18:26

lawrence-witt

8,094
3
13
32

answered Apr 13 '20 at 10:20

Kofi Nartey

2,529
2
9
5

13

The real answer – pmccallum Apr 13 '20 at 14:17
3

In case anyone check this for – Arosha Apr 21 '20 at 07:03
@Arosha The issues with Autocomplete would be similar to [here](https://stackoverflow.com/questions/61238786/material-ui-autocomplete-is-not-working-when-setting-textfield-inputprops/61239293#61239293). – Ryan Cogswell May 21 '20 at 00:00
@Arosha yes i also encountered the same issue, Autocomplete is not working and the only option of createMuiTheme worked for me – mohit uprim May 24 '20 at 15:04
@H.Zao this is the simpliest answer – Aljohn Yamaro May 31 '20 at 02:14
3

For me this works on Autocomplete but using `InputProps`, with uppercase – jstnno Jan 12 '21 at 23:36
This did not work. Why? https://codesandbox.io/s/textfield-underline-forked-9nb87?fontsize=14&hidenavigation=1&theme=dark – Handeman Jan 19 '21 at 11:04
11

Worked with capital "InputProps" not "inputProps"! – Handeman Jan 19 '21 at 11:09
3

Just had to revert this back to `InputProps` as mentioned in comments. For future reference, lowercase `inputProps` targets the *attributes* of the input, not the props passed to the MUI component. [Documentation](https://material-ui.com/api/text-field/) – lawrence-witt Feb 01 '21 at 18:19
@lawrence-witt .. thank you for the edit and the heads-up information – Kofi Nartey Feb 03 '21 at 11:06
1

For Autocomplete `InputProps={{...params.InputProps, disableUnderline: true}} ` will show dropdown as well. – Nikhil Chandu Mar 01 '21 at 18:23

Ryan Cogswell · Accepted Answer · 2020-05-20T23:58:30.867

Even though this is currently the accepted answer, please see the other answer instead (using the disableUnderline prop). I wrote this answer after having recently written an answer about how to customize the underline (which uses approaches similar to this answer) and missed that there was a property specifically for removing the underline.

Below is an example of how to remove the underline. :before is used for the default and hover styling and :after is used for the focused styling, so the border needs to be removed for both of those cases.

The multiple ampersands (e.g. "&&&:before") increase the CSS specificity of the rule so that it wins over the default styling (e.g. &:hover:not($disabled):before).

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  underline: {
    "&&&:before": {
      borderBottom: "none"
    },
    "&&:after": {
      borderBottom: "none"
    }
  }
});
function App() {
  const classes = useStyles();
  return <TextField defaultValue="default text" InputProps={{ classes }} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answer: How do I custom style the underline of Material-UI without using theme?

Thank you, Ryan, very detailed answer and that's exactly what i wanted ! — H.Zhao, Sep 13 '19 at 12:58

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

2 Answers2

Linked