🎾

chakra-ui를 styled-components처럼 모듈화 시키기

🔗

방법 1.


import { ChakraComponent, Box, BoxProps } from '@chakra-ui/react'

type DivComponent = ChakraComponent<'div', {}>

1. const Card = ((props: BoxProps) => (
  <Box px='4' py='5' rounded='sm' shadow='lg' {...props} />
)) as DivComponent

//
이거
2. const CardLayout = (props: BoxProps) => (
  <Box px='4' py='5' rounded='sm' shadow='lg' {...props} />
)

장점

styled-components의 $변수처럼 커스텀 prop을 넘겨줄 수 있음 ChakraComponent<'div', { 변수이름: 값 }>

단점

뭔가 복잡해보임

타입도 넣어줘야됨

chakra-ui 타입 컨밴션까지 생각하면 머리 터짐;;
그냥 저렇게 스크립트 상위에 선언해서 사용해야될듯

방법 2.


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

const Card = chakra('div', {
  // attach style props
  baseStyle: {
    px: '4',
    py: '5',
    rounded: 'sm',
    shadow: 'lg',
  },
})

장점

간결, 깔끔

단점

실험적 기능이라 아직 안되는게 있는 것 같음

변수 넘겨주는게 안되는것 같음

근데 이건 sx 속성으로 JSX에서 직접 변경하는게 맞는듯