Styled Components 활용

JavaScript React

2023-03-14

Parent 컴포넌트로부터 props를 내려받기

// Parent component
<MySpan color="yellowgreen" isImportant={true}>Hello</MySpan>

// Child styled component 
export const MySpan = styled.span`
  color: ${props => props.color}
  font-weight: ${props => (props.isImportant ? 'bold' : 'light')};
`

공통 컴포넌트를 작성하고 스타일 상속하기(Extend)

const MyButton = styled.button`
  border-radius: 0.5rem;
  border: unset;
`

const YellowButton = styled(MyButton)`
  background-color: yellow;
`

const BlackButton = styled(MyButton)`
  background-color: black;
  color: white;
`

스타일 상속하며 태그 변경하기

const MyTag = styled.p`
  font-size: 1.5rem;
  font-weight: bold;
`
const MyItalicTag = styled(MyTag.withComponent("span"))`
  font-style: italic;
  font-weight: normal;
`