styled-componont에서 props 사용하기

개요

props로 넘어오는 값이 무엇이냐에 따라 styled-component를 활용하여 색깔을 바꾸려고 한다

 

본문

아래와 같이 값을 props로 받는 태그가 있다

 

<STATE color={data.state}>{data.state}</STATE>

 

styled components를 활용하여 props의 값에 따라 색깔을 바꿔주고 싶다 

 

그럴 때엔 아래와 같이 props를 받으면 된다

 

const State = styled.Text`
  ${props => {
    switch(props.color) {
      case '안녕':
        return css`
          color: red;
        `;
      case '하이':
        return css`
          color: orange;
        `;
      case '헬로우':
        return css`
          color: yellow
        `;
      default:
        return css`
          color: #000;
        `;
      }
  }}
`;

결론

...!