Styled-Components / Override

Tab 컴포넌트를 만들며 적용한 styled-components override 개념정리

• styled-components override란?
  
  
• 사용한 이유
  
  
• 사용 방법
  
  
• 좋았던 점

 

 

 

styled-components override란?

 

이미 생성된 스타일을 재정의 할 수 있는 방법이다.

사용한 이유

 

이미 만들어 놓은 버튼컴포넌트의 variant-ghost 스타일을 사용하여 탭을 만들어 보고싶었다.

 

사용 방법 

Tab.tsx

const StyledTab = styled(Button)`
  &.active {
    ${tw`text-black`}
  }
  &:not(.active) {
    ${tw`text-slate-500`}
  }
`;

 

좋았던 점

 

기존의 만들어둔 스타일을 가져와서 바꾸고자 하는 스타일만 재정의 해서 사용 할 수 있다는 점이 재사용성 측면에서 편리했고
!important를 사용하였을 시 발생되는 오류도 방지 할 수 있어서 좋았다.

---

참조: https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library

styled-components: FAQs