전달하려는 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;