styled component를 쓰다가 스타일 확장이나 재사용에 대해 알게 되어 기록 남긴다! 여태나는
똑같은 코드를 반복해서 무식하게 사용 했을까... 😨;;

Styled Component 재사용

commonButtonStyles 을 기본 css로 정해주어, 재활용 해준다

const commonButtonStyles = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const PrimaryButton = styled.button`
  ${commonButtonStyles}
  /* 추가 스타일 정의 */
`;

const SecondaryButton = styled.button`
  ${commonButtonStyles}
  /* 추가 스타일 정의 */
`;

Styled Component 확장

기존 SharedButton을 이용해 확장해 준다.

const SharedButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const PrimaryButton = styled(SharedButton)`
  /* 추가 스타일 정의 */
`;

const SecondaryButton = styled(SharedButton)`
  /* 추가 스타일 정의 */
`;

as 속성을 이용한 HTML 태그 변경

Styled Component에서는 as 속성을 이용해서 tag를 변경할 수 있다.

const StyledButton = styled.button`
  `;

// rendering
<StyledButton as="a" /> // button tag가 as tag로 변경

이를 활용하면, 스타일 중복시 component 확장 방법을 사용해도 다른 태그로 변경하는 식으로 활용 가능하다.

const SharedButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const SecondaryAnchorTag = styled(SharedButton)`
  /* 추가 스타일 정의 */
`;

// rendering
// SharedButton의 style을 가져오면서 a태그로 변환
<SecondaryAnchorTag as="a"/> 

Theme를 이용한 전역 스타일

import { ThemeProvider } from 'styled-components';

const App = () => {
  const theme = {
		backgroundColor: black;
		color: white;
	}
  return (
    <ThemeProvider theme={theme}>
				<InnerComponent />
    </ThemeProvider>
  );
};

// InnerComponent.jsx
const InnerComponent = () => {
	...
	return <StyledDiv>...</StyledDiv>
}

const StyledDiv = styled.div`
		color: ${(props) => props.theme.color};
    background-color: ${(props) => props.theme.backgroundColor};
`