StyledComponent에서 중복되는 코드를 없애고싶다면?

요즘 React를 활용하여 쇼핑몰을 만들고 있습니다. StyledComponent를 사용해서 css스타일을 입히고 있는데

const StyledSellerLoginBtn = styled.button`
  background-color: ${(props) => (props.clicked ? props.color : "#F2F2F2")};
  border-left: 1px solid #c4c4c4;
  border-top: 1px solid #c4c4c4;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
  font-weight: 500;
`;

const StyledBuyerLoginBtn = styled.button`
  background-color: ${(props) => (props.clicked ? props.color : "#F2F2F2")};
  border-top: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
  font-weight: 500;
`;

위의 두 코드를 작성하는 과정에서 중복되는 코드가 매우 많았습니다. 보시면 border-left 랑 border-right 빼고는 전부 중복되는 코드라 수정이 필요해보였습니다.

구글링해서 알아낸 결과

const StlyedBuyerOrSeller = styled.button`
  background-color: ${(props) => (props.clicked ? props.color : "#f2f2f2")};
  border-bottom: ${(props) => (props.clicked ? props.bottom : "1px solid #c4c4c4")};
  border-top: 1px solid #c4c4c4;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
  font-weight: 500;
`;

위와 같이 중복되는 코드들을 하나의 컴포넌트로 만든후에

const StyledBuyerLoginBtn = styled(StlyedBuyerOrSeller)`
  border-right: 1px solid #c4c4c4;
`;

const StyledSellerLoginBtn = styled(StlyedBuyerOrSeller)`
  border-left: 1px solid #c4c4c4;
`;

styled(StyledBuyerOrSeller)와 같이 컴포넌트의 속성을 상속할 수 있다는 것을 알게되었습니다.

비슷한 예로 Link 태그에 스타일을 줄땐 styled(Link) 와 같이 스타일을 주면 됩니다!

중복된 코드를 줄임으로써 내 코드가 더 멋있어졌당