styled-components를 이용해 커스텀할 때 Warnin... - 인프런

안녕하세요 스타일드 컴포넌트를 이용해서 커스텀을 하려고 하는데 다음과 같은 오류가 떠서 문의 드립니다.

이렇게 className이 맞지 않는다는 오류가 뜨는데 혹시 버전이 달라서 그런걸까요?

코드는 이런식으로 작성했습니다.

import React, { useState, useCallback, useMemo } from "react";
import Head from "next/head";
import Link from "next/link";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Form, Input, Button } from "antd";

const FormStyle = styled(Form)`
  padding: 1rem;
`;

const LoginForm = ({ setIsLogin }) => {
  const [values, setValues] = useState({});

  const handleChange = useCallback(
    ({ target: { name, value } }) => {
      setValues({ ...values, [name]: value });
    },
    [values]
  );

  const handleSubmit = useCallback(() => {
    setIsLogin(true);
  }, [values.id, values.password]);

  const style = useMemo(() => ({ marginTop: 10 }), []);

  return (
    <>
      <Head>
        <title>Login | NodeBird</title>
      </Head>
      <FormStyle onFinish={handleSubmit}>
        <div>
          <label htmlFor="id">아이디</label>
          <Input
            name="id"
            value={values.id}
            onChange={handleChange}
            required
            autoComplete="false"
          />
        </div>
        <div>
          <label htmlFor="password">비밀번호</label>
          <Input
            name="password"
            type="password"
            value={values.password}
            onChange={handleChange}
            required
            autoComplete="false"
          />
        </div>
        <div style={style}>
          <Button type="primary" htmlType="submit" loading={false}>
            로그인
          </Button>
          <Link href="/signup">
            <a>
              <Button>회원가입</Button>
            </a>
          </Link>
        </div>
      </FormStyle>
    </>
  );
};

LoginForm.propTypes = {
  setIsLogin: PropTypes.func.isRequired,
};

export default LoginForm;

package.json dependency도 같이 첨부합니다.

"dependencies": {
    "@ant-design/icons": "^4.3.0",
    "antd": "^4.9.4",
    "next": "^10.0.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "styled-components": "^5.2.1"
  },

인프런 커뮤니티 질문&답변

styled-components를 이용해 커스텀할 때 Warning 문제