Styled-components 스타일 재사용

style-component 특정 스타일 재사용

스타일링을 하게되면 일정한 스타일을 반복하게 사용 될 경우가 있다.
예시로 아래 코드는 완전히 동일한 스타일이 적용되어 있다.

const Text = styled.p`
  font-size: 10px;
  margin: 5px;
  line-height: 10px;
  color: #194384;
`;

const ButtonText = styled.p`
  font-size: 10px;
  margin: 5px;
  line-height: 10px;
  color: #194384;
`;

이렇게 완전히 똑같은 스타일을 사용해야 한다면 같은 코드의 양이 2배가 된다...
코드의 양을 줄이기 위해 style-component 에서는 똑같은 스타일링을 복사 할 수 있다.

재사용 방법

const Text = styled.p`
  font-size: 10px;
  margin: 5px;
  line-height: 10px;
  color: #194384;
`;

const ButtonText = styled(Text)`
`;

이렇게 Text 컴포넌트의 스타일과 <p>태그까지 복사 할 수 있다

스타일 재사용 및 스타일 속성 추가

const Text = styled.p`
  font-size: 10px;
  margin: 5px;
  line-height: 10px;
  color: #194384;
`;

const ButtonText = styled(Text)`
  color: red;
`;

스타일을 재사용 할 뿐 아니라 수정 할 수 있다!