material ui textField border doesn't show completely

Question

I use material UI textField tag and I want to remove the label of text field but when I remove or even set null my label it doesn't work, and I miss the border-top of that

 <Box component="form" sx={{ "&.MuiTextField-root": { m: 0.2, width: "100%", marginBottom: "30px", }, }} noValidate autoComplete="off" > <div> <div className="pass-box"> <label>username</label> </div> <TextField fullWidth placeholder="username label="" id="outlined-size-small-1" size="small" value={username} onChange={(e) => setUsername(e.target.value)} InputProps={{ endAdornment: ( <IconButton className="log-icon"> <AccountCircleIcon /> </IconButton> ), }} ></TextField> <br /> <TextField fullWidth placeholder="password label="" type="password" id="outlined-size-small" size="small" onChange={(e) => setPassword(e.target.value)} InputProps={{ endAdornment: ( <IconButton className="log-icon"> <LockIcon /> </IconButton> ), }} ></TextField> <br /> </div> </Box>

this is an image of my text field and you see the border-top missed

Answer 1

Same problem here! Solved with disabling Boostrap css.

MUI provides its own Bootstrap-like grid system, so it might be a solution.

Answer 2

To remove label of text field you can achieve this by two way.

Solution 1. - Just add InputLabelProps={{shrink: false}} property to TextField.

<TextField InputLabelProps={{shrink: false}} ... />

Solution 2. -Add css to remove legend of TextField.

"& .MuiOutlinedInput-notchedOutline legend": { display: "none", }

Answer 3

I solved it by changing the theme default props of MuiOutlinedInput and MuiInputLabel like that:

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      defaultProps: {
        notched: false,
      },
    },
    MuiInputLabel: {
      defaultProps: {
       shrink: false,
      },
    }
  },
});

You can read about MUI component overriding here .