스페이싱 커스터마이징

Chakra UI에서 스페이싱 토큰을 직접 정의하면 마진이나 패딩에 나만의 간격 값을 쓸 수 있어요. 스타일링 엔진을 바르게 커스터마이징하고 타입 안전성을 확보하려면 먼저 overview 문서를 읽어 두세요.

출처: 문서

본문

예시

Chakra UI에서 스페이싱을 커스터마이징하는 예시를 볼게요.

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  theme: {
    tokens: {
      spacing: {
        "128": { value: "32rem" },
        "144": { value: "36rem" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

사용법

Chakra UI에서 커스텀 스페이싱을 사용하는 방법이에요.

<Box margin="128" />

더 알아보기 (Learn more)

테마 개요에서 Chakra UI 테마 시스템 전반을 알아보세요.