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 組件覆蓋的信息。