Button (with Chakra)

Button은 아주 많이 사용되는 UI이다. 그냥 button 태그를 사용해도 되고 스타일 같은 것들을 지정해서 변경하면서 재사용 할 수 있게 컴포넌트를 만들어서 사용할 수도 있다. 조만간 Chakra UI를 사용할 일이 있어서 미리 공부할 겸 간단하게 컴포넌트를 작성해보았다.

 

CustomButton.tsx

import React, { PropsWithChildren } from 'react';

import { Button, ButtonProps } from '@chakra-ui/react';

type Props = ButtonProps;

const CustomButton = (props: PropsWithChildren<Props>) => {
  const { children, ...rest } = props;
  return <Button {...rest}>{children}</Button>;
};

export default CustomButton;

children 빼고 전부다 Button의 속성으로 사용하게 넣어준다.

 

 

되게 간단하다. 포인트는 Chakra에서 제공해주는 ButtonProps 타입을 사용한 것이다. 

 

 

이런식으로 Chakra Component에 사용할 수 있는 속성과 기존에 button 태그에 사용할 수 있는 속성들을 Props로 넘겨줄 수 있다.

 

스타일링은 속성을 통해 할 수 있지만 기본 스타일을 정할 수 있다.

import { defineStyleConfig } from '@chakra-ui/react'

const Button = defineStyleConfig({
  // 모든 Button의 스타일에 적용된다.
  baseStyle: {
    fontWeight: 'bold',
    textTransform: 'uppercase',
    borderRadius: 'base', 
  },
  sizes: {
    sm: {
      fontSize: 'sm',
      px: 4, //x 축
      py: 3, // y 축
    },
    md: {
      fontSize: 'md',
      px: 6, 
      py: 4,
    },
  },
  // 두가지 variant 
  variants: {
    outline: {
      border: '2px solid',
      borderColor: 'purple.500',
      color: 'purple.500',
    },
    solid: {
      bg: 'purple.500',
      color: 'white',
    },
  },
  // 기본값
  defaultProps: {
    size: 'md',
    variant: 'outline',
  },
})

// 테마 적용
const theme = extendTheme({
  components: {
    Button,
  },
})

 

이제 Button을 사용했을 때 기본적으로 purple 색에 md 사이즈의 Button이 된다.