(React) 쇼핑몰 만들기 - styled components

style을 css 파일을 사용하지 않고 간편하게 이쁘게 만들기 위해 라이브러리가 하나 필요하다.
우선 터미널에 npm install styled-components 를 입력하여 설치를 하자.

.
.
import styled from "styled-components";
.
.
const YellowBtn = styled.button`
  background: ${ props => props.bg };
  color: ${(props) => (props.bg == "blue" ? "white" : "black")};
  paddingL 10px;
`;

const Box = styled.div`
  background: grey;
  padding: 20px;
`;

function Detail(props) {
  .
  .
  <Box>
      <YellowBtn bg="yellow">버튼</YellowBtn>
  </Box>

이런식으로 style 적용된 Component를 직접 만들고 사용을 할 수 있다.
물론 props도 이용할 수 있다.
삼항연산자 문법도 이용할 수 있다.