-
Styled-Components 리액트 스타일 컴포넌트 props 와 extendingReact/Styled-Components 2023. 2. 20. 17:50
📌 스타일 컴포넌트에서 반복되는 코드를 줄일 수는 없는걸까?
const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `;
📌 해결방안 : props 로 변수를 지정해주며 styled( ) 로 확장할 수 있다.
...(중략) const Box = styled.div` display: flex; align-items: center; background-color: ${(props) => props.bgcolor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; ...(중략) return ( <> <Box bgcolor={"red"}><Text>BoxOne</Text></Box> <Circle bgcolor={"blue"}><Text>BoxTwo</Text></Circle> </> )
'React > Styled-Components' 카테고리의 다른 글
Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자! (0) 2023.02.20 Styled-Components 의 as 와 attrs 를 알아보자! (0) 2023.02.20 Styled-Components / React 리액트 스타일 컴포넌트 공부하기 (0) 2023.02.20