Styled-components 변수처리&확장
2022. 3. 29. 02:32ㆍ코딩공부/React
import React from 'react';
import styled from 'styled-components';
const Father = styled.div`
display: flex;
`;
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;
'코딩공부 > React' 카테고리의 다른 글
Styled-components 태그 속성 한번에 주기 (0) | 2022.03.29 |
---|---|
Styled-components as 속성 (0) | 2022.03.29 |
리액트 심화반 3주차(1) (0) | 2022.02.08 |
리액트 심화반 2주차(3) (0) | 2022.02.07 |
리액트 심화반 2주차(2) (0) | 2022.02.07 |