我使用了材质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>
这是我的文本字段的图像,您可以看到顶部边框缺失
3条答案
按热度按时间pieyvz9o1#
要删除文本字段的标签,您可以通过两种方式实现此操作。
解决方案1。-只需添加输入标签属性={{shrink:false}}属性设置为文本字段。
〈文本字段输入标签属性={{收缩:错误}}.../〉
解决方案2.-添加css以删除TextField的图例。
“& . Mui轮廓输入开槽轮廓图例”:{显示:“无”,}
bvhaajcl2#
同样的问题!通过禁用Boostrapcss解决。
MUI提供了自己的类似Bootstrap的网格系统,因此它可能是一个解决方案。
rdlzhqv93#
我通过更改MuiOutlinedInput和MuiInputLabel的主题默认属性解决了这个问题,如下所示:
您可以阅读有关MUI组件覆盖here的信息。