Styled-components - (2)props전달 및 컴포넌트 확장

Apeachicetea·2021년 11월 23일
0

스타일컴포넌트

목록 보기
2/5

스타일 컴포넌트간 props전달로 속성 변경하기

전달하려는 key의 명은 자유롭게 지정가능하다.

  • 예시
const Box = styled.div`
  background-color: ${props => props.bgColor};
  width: 100px;
  height: 100px;
`

function App() {
  return (
    <Father>
      <Box bgColor = "teal" />
      <Box bgColor = "tomato" />
    </Father>
  );
}

스타일 컴포넌트 확장시켜 활용하기

const 작명 = styled(기존스타일컴포넌트명)

  • 예시

const Box = styled.div`
  background-color: ${props => props.bgColor};
  width: 100px;
  height: 100px;
`

//기존 Box스타일컴포넌트의 속성들을 가져와 활용할 수 있다.
const Circle = styled(Box)`
  border-radius: 50px;
`

function App() {
  return (
    <Father>
      <Box bgColor = "teal" />
      <Circle bgColor = "tomato" />
    </Father>
  );
}

export default App;
profile
웹 프론트엔드 개발자

0개의 댓글