Styled Component | props 전달

군밤먹으면서코딩·2021년 7월 25일
0

css

목록 보기
2/2
post-thumbnail

styeld Component가 SASS보다 좋은게 뭘까? 하면서 반신반의로 사용해 보았다. 근데 겁나 좋다.. ㅋㅋㅋ

const Graph = styled.div`
  height: 9px;
  width: ${props => `${props.count * 0.3}px`};
  background-color: ${props => `${props.count > 400 ? 'blue' : 'black'}`};

요렇게 해당 태그에 props를 전달해주면 해당 페이지에서 바로 props를 받아 적용해 버릴 수 있다.

이거 외에도, 컴포넌트의 css를 그대로 재활용 할 수 있다는 점.

클래스 네임을 신경쓰지 않아도 된다는 점 등 SASS보다 편리한 부분들이 많은 것 같다.

결론 : Styled Component 👍

0개의 댓글