MUI 文本字段标签和默认值叠加

Question

我刚刚使用 MUI、react-hook-form 和 yup 创建了一个新项目

我有一个登录页面，其中有一个我无法弄清楚的 UI 错误。

当我加载页面时，浏览器正确完成默认值，但它与文本字段标签混淆：

然后，如果我单击网页上的任意位置，它就会恢复正常：

这是我的代码：

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { Paper } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

export function LoginPage() {
  const schema = yup.object().shape({
    trigram: yup.string().max(3).min(3).required(),
    password: yup.string().required(),
  });
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      trigram: "",
      password: "",
    },
  });
  const onSubmit = (data) => {
    console.log("submit", data);
  };
  return (
    <Container component="main" maxWidth="xs">
      <Paper
        elevation={2}
        sx={{
          p: 4,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: "primary.main" }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Connexion
          </Typography>
          <Box
            component="form"
            onSubmit={handleSubmit(onSubmit)}
            noValidate
            sx={{ mt: 1 }}
          >
            <Controller
              name="trigram"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  margin="normal"
                  error={!!errors?.email}
                  helperText={errors?.email?.message}
                  required
                  fullWidth
                  label="Trigramme"
                  autoComplete="username"
                  autoFocus
                />
              )}
            />
            <Controller
              name="password"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  margin="normal"
                  error={!!errors?.email}
                  helperText={errors?.email?.message}
                  required
                  fullWidth
                  label="Mot de passe"
                  autoComplete="current-password"
                  type="password"
                />
              )}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Connexion
            </Button>
          </Box>
        </Box>
      </Paper>
    </Container>
  );
}

我不明白发生了什么

Answer 1

将

defaultValue=""

添加到每个 TextField 的 props 中。这是一个已知问题，详见 https://mui.com/material-ui/react-text-field/#limitations

添加以下道具

InputLabelProps={{ shrink: true }}

也可以解决问题。

您还可以查看此 Github Issue https://github.com/react-hook-form/react-hook-form/issues/2192

Answer 2

我最终使用了 MUI 文档中的

InputLabelProps={{ shrink: true }} 

，了解 @Bassem 链接的组件的限制。

Answer 3

处理这个问题的最佳方法是动态使用收缩：

<TextField
  defaultValue={value}
  InputLabelProps={{ shrink: !!value }}
  label="Your Label"
/>