사이즈 커스터마이징

Chakra UI에서 사이즈 토큰을 직접 정의하면 width, height 같은 속성에 세로/가로 비율과 같은 커스텀 값을 손쉽게 쓸 수 있어요. 스타일링 엔진을 바르게 커스터마이징하고 타입 안전성을 확보하려면 먼저 overview 문서를 읽어 두세요.

출처: 문서

본문

예시

Chakra UI에서 사이즈를 커스터마이징하는 예시를 볼게요.

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

const customConfig = defineConfig({
  theme: {
    tokens: {
      sizes: {
        "1/7": { value: "14.285%" },
        "2/7": { value: "28.571%" },
        "3/7": { value: "42.857%" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

사용법

width, height, minWidth, minHeight, maxWidth, maxHeight 등 사이즈와 관련된 속성 값에 sizes 토큰을 지정하면 돼요.

<Box width="1/7" height="2/7" />

더 알아보기 (Learn more)

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