material ui textField 边框没有完全显示

Question

我使用材料 UI textField 标签，我想删除文本字段的 label 但是当我删除甚至设置 null 我的 label 它不起作用，我错过了它的边框顶部

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

这是我的文本字段的图像，您会看到 border-top missed

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

我通过像这样更改MuiOutlinedInput和MuiInputLabel的主题默认道具来解决它：

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

您可以在此处阅读有关 MUI 组件覆盖的信息。