如何删除材料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

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 6

For Outlined TextField

If you want to remove outlines from the outlined text field. Then add this in your TextField

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

Here is your code...

 <TextField
  variant="outlined"
  sx={{border: 'none', "& fieldset": { border: 'none' },}}
  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>
    ),
  }}
/>

For Standard TextField

If you want to remove underline from the standard text field. Then add this in your TextField

InputProps={{ disableUnderline: true }}

Here is code

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

Answer 7

Finally, the following css works (2022)

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

Answer 8

Try to override style

See example below

Answer 9

disableUnderline
If true, the input will not have an underline.

<Input
            variant="standard"
            disableUnderline={true}
            required
            color="info"
            fullWidth
            margin="dense"
            focused
          />

API

Answer 10

Added sx prop with below attributes in TextField and it worked fine for me

 <TextField
      sx={{
        input: {
          border: "none",
        },
        "::placeholder": { color: "white" },
      }}
 
    />

Answer 11

Just add

".MuiOutlinedInput-notchedOutline": { border: "none" },

to the sx prop.

This works both for MUI Select and Textfield

Answer 12

The documentation doesn't offer any good way to do this
So you can select the Mui selector for that element and modify it directly
This worked for me. You can override the css

<TextField
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
 />
     
<TextField
   id="filled-basic"
   label="Filled"
   variant="filled"
   sx={{
          "& .MuiFilledInput-underline:before": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:after": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
            borderBottom: "none",
          },
        }}
 />

https://codesandbox.io/s/fancy-shadow-515yoi?file=/src/App.js

Answer 13

to remove border in TextField fieldset in MUI 5,

simply add following.

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

Answer 14

If you want to remove the border for all MuiOutlinedInput components, add this to your theme's components object:

export const theme = createTheme({
  // ...
  components: {
    // ...
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          border: 'none',
        },
      },
    },
  },
})