styled-components 를 이용하여 props로 효과를 줘보자

css작업을 하다보면 생각보다 코드의 중복이 많이 일어난다.
props를 이용하여 코드의 양을 줄여보도록하자

import React from "react";
import styled from "styled-components";

const App = () => {
  return (
    <Father>
      <Box bgColor="teal" /> // 2. 여기서 box와 CirCle에 bgColor를 통해서 Props를 받는다. 그리고 원하는 컬러를 넣어주면 된다.
      <Circle bgColor="red" />
    </Father>
  );
};

const Father = styled.div`
  display: flex;
`;

const Box = styled.div`
  background-color: ${(props) => props.bgColor} // 1. 먼저 bgColor라는 변수를 적어서 밑으로 내려주면 된다.
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`  // circle의 경우 Box Component와 같은 효과를 주고싶다. 하지만 	border-radious만 다르다 그럴 때는
styled에 (복사하고 싶은 component)를 넣어주면 된다.
  border-radius: 50px;
`;
export default App;