how to remove border in textfield fieldset in material ui

Question

I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.

what css I write to remove the border.

<TextField
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  disableUnderline={false}
  // label="Phone Number"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus

  onChange={handlePhoneNumberChange}
  className={classes.textField}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    ),
  }}
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

Answer 1

I was looking for a borderless text-field and this is working for me...

<TextField
  variant="standard" // <== changed this
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: <AccountCircle />, // <== adjusted this
    disableUnderline: true, // <== added this
  }}
/>

These 2 props seem to be the key...

variant="standard"
 InputProps={{
        disableUnderline: true,
      }}

Answer 2

InputProps can be passed to the style the variants of the inputs. For outlined input there a class named .MuiOutlinedInput-notchedOutline which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline prop in InputProps.

const useStyles = makeStyles(() => ({
  noBorder: {
    border: "none",
  },
}));

const TextInput = props => {
  const { onChange, type} = props;
  const classes = useStyles();

  return (
    <TextField
      variant="outlined"
      margin="normal"
      required
      fullWidth
      id="phoneNumber"
      disableUnderline={false}
      // label="Phone Number"
      name="phoneNumber"
      autoComplete="phoneNumber"
      autoFocus
      classes={{notchedOutline:classes.input}}

      // onChange={handlePhoneNumberChange}
      className={classes.textField}
      placeholder="Phone Number"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        ),
        classes:{notchedOutline:classes.noBorder}
      }}
    />
  );
};

Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde

Answer 3

In your textField style add outline: 'none'

Answer 4

I tried all the answers here.

Doesn't work

I found this InputBase It works very nicely. This is exactly what you should use.

They have provided the sandbox too Sandbox InputBase

Answer 5

to remove border in TextField fieldset in MUI 5,

simply add following.

    sx={{
      "& fieldset": { border: 'none' },
    }}

Answer 6

As at 2022, if your using MUI >= version 5, you can use some solutions here, and currently there's no where in the doc on how do this in Textfield.

Another nice component MUI provides is the Input, and luckily for us it accepts almost all props passed to Textfield, that's where you can do disableUnderline={false} and it will work as expected.

    <Input
      disableUnderline={true}
      variant="standard"
      autoFocus
      onChange={yourChangeHandler}
      value={value}
      placeholder="Title"
      fullWidth
    />

Answer 7

Finally, the following css works (2022)

  '& .MuiInput-root': {
    '&:before, :after, :hover:not(.Mui-disabled):before': {
      borderBottom: 0,
    },
  },