Material ui textField 边框未完全显示

Question

我使用材质 UI textField 标签，我想删除文本字段的标签，但是当我删除或什至将标签设置为 null 时，它不起作用，并且我错过了该标签的边框顶部

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

这是我的文本字段的图像，您会看到顶部边框丢失了

Answer 1

要删除文本字段的标签，您可以通过两种方式来实现。

解决方案 1。 -
只需将 InputLabelProps={{shrink: false}} 属性添加到 TextField 即可。

<文本字段
InputLabelProps={{收缩: false}}
...
>>

解决方案 2. - 添加 css 以删除 TextField 的图例。

"& .MuiOutlinedInput-notchedOutline 图例": {
显示：“无”，
}

Answer 2

这里同样的问题！通过禁用 Boostrap css 解决。

MUI 提供了自己的类似 Bootstrap 的网格系统，所以它可能是
一个解决方案。

Answer 3

我通过更改 MuiOutlinedInput 和 MuiInputLabel 的主题默认属性解决了这个问题：

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

您可以阅读有关 MUI 组件重写的内容 此处。