유틸리티 커스터마이징

유틸리티 커스터마이징

유틸리티 API는 나만의 CSS 속성을 만들거나, 기존 속성들을 특정 값 혹은 토큰 집합에 매핑하는 방법이에요. 유틸리티를 정의하거나 커스터마이징할 때 필요한 속성들은 다음과 같아요.

출처: 문서

본문

• shorthand: 속성의 축약형(별칭) 버전이에요.
• values: 속성이 가질 수 있는 값들이에요. 토큰 카테고리나 값들의 enum(문자열, 숫자, boolean)이 될 수 있어요.
• transform: 값을 유효한 css 객체로 변환해 주는 함수예요.

커스텀 유틸리티 만들기

요소에 border radius를 적용하는 br 속성을 새로 만든다고 해 볼게요.

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

const customConfig = defineConfig({
  utilities: {
    extend: {
      br: {
        values: "radii",
        transform(value) {
          return { borderRadius: value }
        },
      },
    },
  },
})

const system = createSystem(defaultConfig, customConfig)

이제 컴포넌트에서 br 속성을 사용할 수 있어요.

import { Box } from "@chakra-ui/react"

function App() {
  return <Box br="sm" />
}

enum 값 사용하기

요소에 제한된 set의 인라인 border를 적용하고, border 색상을 자동으로 적용하는 borderX 속성을 만들어 볼게요.

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

const customConfig = defineConfig({
  utilities: {
    extend: {
      borderX: {
        values: ["1px", "2px", "4px"],
        shorthand: "bx",
        transform(value, { token }) {
          return {
            borderInlineWidth: value,
            borderColor: token("colors.red.200"),
          }
        },
      },
    },
  },
})

const system = createSystem(defaultConfig, customConfig)

이제 컴포넌트에서 borderX 또는 bx 속성을 사용할 수 있어요.

import { Box } from "@chakra-ui/react"

function App() {
  return <Box borderX="sm" />
}

매핑된 값 사용하기

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

const customConfig = defineConfig({
  utilities: {
    extend: {
      borderX: {
        values: { small: "2px", medium: "5px" },
        shorthand: "bx",
        transform(value, { token }) {
          return {
            borderTopWidth: value,
            borderTopColor: token("colors.gray.400"),
          }
        },
      },
    },
  },
})

const system = createSystem(defaultConfig, customConfig)

이제 컴포넌트에서 borderX 또는 bx 속성을 사용할 수 있어요.

import { Box } from "@chakra-ui/react"

function App() {
  return <Box borderX="sm" />
}

더 알아보기 (Learn more)

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