reactjs 材料ui文本字段边框未完全显示

ybzsozfc  于 2022-12-29  发布在  React
关注(0)|答案(3)|浏览(127)

我使用了材质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>

这是我的文本字段的图像,您可以看到顶部边框缺失

pieyvz9o

pieyvz9o1#

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

解决方案1。-只需添加输入标签属性={{shrink:false}}属性设置为文本字段。

〈文本字段输入标签属性={{收缩:错误}}.../〉

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

“& . Mui轮廓输入开槽轮廓图例”:{显示:“无”,}

bvhaajcl

bvhaajcl2#

同样的问题!通过禁用Boostrapcss解决。
MUI提供了自己的类似Bootstrap的网格系统,因此它可能是一个解决方案。

rdlzhqv9

rdlzhqv93#

我通过更改MuiOutlinedInputMuiInputLabel的主题默认属性解决了这个问题,如下所示:

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

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

相关问题