React + TypeScript 환경에서 Styled-components를 활용한 다양한 스타일의 버튼 컴포넌트 만들기

React + TypeScript 환경에서 Styled-components를 사용하여 다양한 스타일의 버튼을 만들어봤다. 

import React from 'react'
import styled, { css, keyframes }  from 'styled-components'

// ButtonProps 타입 정의
type ButtonProps = {
  children: string,
  sm?: boolean, // sm: boolean | undefined 로도 사용 가능 
  me?: boolean,
  lg?: boolean,
  xlg?: boolean,
}

// Button 컴포넌트 정의
export const Button = ({ children, ...props }:ButtonProps) => {
  return  <BtnStyle {...props}> {children}</BtnStyle>
 
}


// 아래에서 위로 등장하는 듯한 애니메이션 
const toUp = keyframes`
0% {
  opacity: 0;
  transform: translateY(50%);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
`;

const BtnStyle = styled.button<ButtonProps>`
  width: 90%;
  height: 3.5rem;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 0.25rem;
  ${props => props.theme.DisFlexCenter};
  background-color: ${props => props.theme.colorTheme.orange};
  animation: ${toUp} 0.25s ease-in-out;
  // sm 속성이 true일 때, 버튼 크기를 변경
  ${(props) =>
    props.sm &&
    css`   
        width: 4.6875rem;
        height: 1.875rem;
    `};
    ${(props) =>
    props.me &&
    css`   
        width: 9.375rem;
        height: 2.5rem;
    `}; 
    ${(props) =>
    props.lg &&
    css`   
        width: 12.5rem;
        height: 2.8125rem;
    `}; 
    ${(props) =>
    props.xlg &&
    css`   
        width: 4.6875rem;
        height: 1.875rem;
    `}; 
`;