[styled-components] You may see this warning because you've called styled inside another component.. 에러 해결방법

 

개인 프로젝트를 진행하다가 회원가입 폼을 만들었고,

폼에 글자를 입력하는데 한 글자 입력하고 포커스가 사라졌다

키보드가 잘못 눌렸나? 싶어서 다시 글자 입력하는데 계속 한 글자 타이핑할 때마다 포커스가 사라지더라

 

뭐가 문제지? 하고 콘솔창을 열어보니

 

The component styled.div with the id of * has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.

 

노란색 바탕에 이런 에러메세지가 있었다

컴포넌트 안에 스타일을 불러서 발생한 에러였다

 

 

출처 : https://github.com/styled-components/styled-components/issues/3117

 

 

깃헙에 누군가가 나와 같은 상황이었고,

해결책을 보고 나서야 뭐가 문제인지 정확히 이해했다

너무 의심을 안하고 있었는데 저 부분에서 에러가 났구나,, 🤪

 

 

const SignupForm = () => {

  const LogoutBtn = styled(Button)`
    background-color: white;
    border: 1px solid #857171;
    max-width: 600px;
    margin: 20px 0;
    width: 100%;
    margin-bottom: 40px;
    height: 40px;

    &:hover {
        background-color: #857171;
        border: 1px solid #857171;
        color: white;
    }
  `;

  const LogoutInput = styled(Input)`
    height: 40px;
  `;


...

}

 

 

먼저 작성했던 styled-component는

컴포넌트 안에 작성해서 에러가 발생해서

아래처럼 밖에서 다시 선언하였다

 

 

const LogoutBtn = styled(Button)`
  background-color: white;
  border: 1px solid #857171;
  max-width: 600px;
  margin: 20px 0;
  width: 100%;
  margin-bottom: 40px;
  height: 40px;

  &:hover {
      background-color: #857171;
      border: 1px solid #857171;
      color: white;
	}
`;

const LogoutInput = styled(Input)`
	height: 40px;
`;

const SignupForm = () => {
	
    ...
    
}

 

 

이렇게 작성하면 에러가 해결된다

:)

 

 

 

Ref.

https://github.com/styled-components/styled-components/issues/3117