[React] styeld-components 를 함수내에 작성하면 이렇게 됩니다.

사건의 발단

 

styeld-components를 사용해서 스타일을 진행하던 중 갑자기 알 수 없는 경고 문구를 마주했다.

엥? 왜 갑자기... 이런 문구가 뜨는 거지?! 

싶었지만 스타일드 컴포넌트를 함수 내에 작성하지 말라는 것 같다...

 

 

예를 들면

아래와 같이 작성해야 하는데,

import styled from 'styled-components'

const StyledSpan = styled.span`
    color: blue;
`
const MyExampleComponent = () =>{
    return <StyledSpan>Test</StyledSpan>
}

 

 

바보처럼 함수 내에 작성하고 있던 것~~^^

import styled from 'styled-components'

const MyExampleComponent = () =>{

    const StyledSpan = styled.span`
        color: blue;
    `
    return <StyledSpan>Test</StyledSpan>
}

 

 

해결

함수 밖에 작성하는 것을 잊지 맙시다.

 

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