javascriptcssreactjsmaterial-ui

how to remove border in textfield fieldset in material ui


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.

enter image description here

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


Solution

  • 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