reactjs - 当我单击页面上的任何元素时出现奇怪的容器。React/SCSS/React-Hook-Form

问题描述

我刚刚实现了一个简单的登录表单。每当我单击表单上的任何元素时，背景中都会出现一个奇怪的身份不明的容器。这很奇怪，因为它似乎与我的登录容器具有相同的 glassmorphism 效果。但是未识别的容器大小只是随机的，并且取决于我单击的元素。我正在使用带有 SCSS 的 React 并使用 React-Hook-Forms 进行登录。

const LoginForm = ({ login }) => {
  const [focused, setfocused] = useState("");

  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Login</h1>
      <motion.input
        className="text-input"
        name="email"
        placeholder="Email"
        ref={register}
      ></motion.input>
      <motion.input
        className="text-input"
        name="password"
        type="password"
        placeholder="Password"
        ref={register}
      ></motion.input>
      <motion.input className="submit-button" type="submit" value="Login" />
      <h3>
        New student?{" "}
        <Link className="register-link" to="/register">
          Register here!
        </Link>
      </h3>
    </form>
  );
};

export default LoginForm;

form {
    @include flex(flex-start, center, column);
    height: auto;
    min-width: 450px;
    padding: 100px 50px;

    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(218, 216, 216, 0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    h1 {
        @include primary-font($headerSize, $headerWeight);
        color: $faintWhite;
        margin-bottom: 30px;
        &:after {
            content: "";
            display: block;
            margin: auto;
            height: 5px;
            width: 100%;
            background: $faintWhite;
            border-radius: 10px;
        }
    }
    .text-input {
        padding: 10px 15px;
        margin-bottom: 20px;
        width: 100%;
        color: $faintWhite;
        @include primary-font(1rem, 500);

        background: rgba(255, 255, 255, 0.25);
        box-shadow: 0 8px 32px 0 rgba(218, 216, 216, 0.37);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.15);

        &::placeholder {
            color: $faintWhite;
            @include primary-font(1rem, 500);
        }
    }
    .submit-button {
        @include primary-font(1.4rem, 600);
        color: #505050;
        padding: 10px 30px;
        border-radius: 30px;
        margin: 5px 0 30px 0;
        cursor: pointer;
        background: white;
        box-shadow: 0 5px 32px 0 rgba(255, 255, 255, 0.5);
        border: none;
    }
    h3 {
        @include primary-font(1rem, 500);
        color: $faintWhite;
        .register-link {
            @include primary-font(1rem, 600);
            color: $faintWhite;
        }
    }
}

以上是SCSS

标签： reactjsformssassreact-hook-form

reactjs - 当我单击页面上的任何元素时出现奇怪的容器。React/SCSS/React-Hook-Form

问题描述

解决方案

推荐阅读