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

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.

Answer 2

Same problem here! Solved with disabling Boostrap css.

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

Answer 3

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", }