6월 23일 TIL - 리액트) styled component

styled component는 패키지 다운부터 받고 import를 해와야 사용이 가능함

yarn add styled-components

 

1. 꾸미고자하는 컴포넌트를 styled component 방식대로 만들고

2. 그 안에 style 코드를 작성하고

3. 이렇게 만들어진 컴포넌트를 실제 html 태그처럼 사용하면 된다

 

import React from "react";
import { css, styled } from "styled-components";

function ButtonArea() {
  return (
    <>
      <h2>01.Button</h2>
      <div>
        <StButton
          backgroundColor="#55efc4"
          color="#000000"
          size="large"
          outline={true}
        >
          테스트
        </StButton>
        <StButton backgroundColor="#55efc4" color="#000000" size="medium">
          테스트
        </StButton>
        <StButton backgroundColor="#55efc4" color="#000000" size="small">
          테스트
        </StButton>
      </div>
      <div>
        <StButton
          backgroundColor="#c49ae6"
          color="#d63031"
          size="large"
          outline={true}
        >
          테스트
        </StButton>
        <StButton backgroundColor="#c49ae6" color="#d63031" size="medium">
          테스트
        </StButton>
        <StButton backgroundColor="#c49ae6" color="#d63031" size="small">
          테스트
        </StButton>
      </div>
    </>
  );
}

export default ButtonArea;

const StButton = styled.button`
  border: none;
  cursor: pointer;
  border-radius: 8px;

  background-color: ${({ backgroundColor }) => backgroundColor};
  color: ${({ color }) => color};
  font-weight: 0;
  ${({ size }) => {
    switch (size) {
      case "large":
        return css`
          height: 50px;
          width: 200px;
        `;
      case "medium":
        return css`
          height: 45px;
          width: 130px;
        `;
      case "small":
        return css`
          height: 40px;
          width: 100px;
        `;
      default:
        break;
    }
  }}
  ${({ outline, backgroundColor }) => {
    if (outline) {
      return css`
        border: 3px solid ${backgroundColor};
        background-color: #fff;
        font-weight: 600;
      `;
    }
  }}
  margin: 5px;
`;