styled-components 패키지를 사용하면 style 선언부에서 JS문법을 사용할 수 있다. 그래서 특정 컴포넌트에만 style을 적용하고 싶을 때, 조건식을 사용한다든지 그런 방식으로 활용될 수 있는데. 컴포넌트가 상속받은 props를 사용하기 위해서는 정형화된 메뉴얼에 따라서 사용하여야만 한다.
메뉴얼에 입각하여 사용하지 않으면 props로 지정한 변수명을 호출하면 "아직 정의되지 않았다"라는 오류 문구를 보이게 된다.
ex)
<Div color="green"><Div/>
//만약 이런 컴포넌트가 있다면
const Div = styled.div`
color: ${color}
//이것도 작동하지 않고
color: ${Div.color}
//이것도 작동하지 않는다.
color : ${(props)=>props.color;}
//이건 제대로 작동하고
${(props)=>"color : green;"}
//이것도 제대로 작동하고
${(props)=>`color : ${props.color}`}
//이것도 제대로 작동한다.
`
