레시피 커스터마이징

레시피 커스터마이징 (Customizing Recipes)

Chakra UI에서 레시피(recipes)와 슬롯 레시피(slot recipes)를 커스터마이징하는 방법에 대해 알아봐요. 기존 레시피를 확장하거나 새 레시피를 정의해 재사용 가능한 스타일을 만들 수 있어요.

출처: 문서

본문

:::info

스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.

:::

레시피 (Recipes)

변형 확장 (Extending variants)

defineRecipe 함수로 레시피 오버라이드를 정의해요.

Button에 새 xl 크기를 추가하는 예시예요.

const buttonRecipe = defineRecipe({
  variants: {
    size: {
      xl: {
        fontSize: "lg",
        px: 6,
        py: 3,
      },
    },
  },
})

const customConfig = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

그러면 컴포넌트에서 새 크기 변형을 사용할 수 있어요.

<Button size="xl">Click me</Button>

새 변형 추가 (Adding new variant)

defineRecipe 함수로 새 레시피 변형을 정의해요.

raised라는 불리언 변형을 정의하는 예시예요.

const buttonRecipe = defineRecipe({
  variants: {
    raised: {
      true: {
        boxShadow: "md",
      },
    },
  },
})

const customConfig = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

그러면 컴포넌트에서 새 변형을 사용할 수 있어요.

<Button raised>Click me</Button>

커스텀 레시피 (Custom recipe)

defineRecipe 함수로 레시피 전체를 새로 정의해요.

Title이라는 커스텀 레시피를 정의하는 예시예요.

const titleRecipe = defineRecipe({
  baseStyle: {
    fontWeight: "bold",
    letterSpacing: "tight",
  },
  variants: {
    size: {
      md: { fontSize: "xl" },
      lg: { fontSize: "2xl" },
    },
  },
})

const customConfig = defineConfig({
  theme: {
    recipes: {
      title: titleRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

그러면 새 레시피로 컴포넌트를 만들 수 있어요.

const Title = (props) => {
  const recipe = useRecipe({ key: "title" })
  const styles = recipe({ size: "lg" })
  return <Box as="h1" css={styles} {...props} />
}

TypeScript

Chakra는 테마 파일에서 TypeScript 타입을 생성할 수 있어요. 그 출력은 이 페이지에서 커스터마이징한 레시피뿐 아니라 토큰, 조건, 레시피, 유틸리티를 포함한 전체 시스템을 반영해요.

:::warning

createSystem에 전달하는 config를 편집할 때마다 typegen을 다시 실행해서 편집기가 정확한 상태를 유지하게 하세요. 생성된 파일이 뒤처지면 TypeScript가 재생성할 때까지 동작하는 코드에도 오류를 표시할 수 있어요.

:::

타입을 새로 고치려면:

npx @chakra-ui/cli typegen ./theme.ts

createSystem을 호출하는 파일 경로를 사용해요 (보통 ./theme.ts). CLI 참조에서 watch 모드, postinstall / CI, 모노레포 설정을 설명해요.

슬롯 레시피 (Slot Recipes)

기존 슬롯 레시피를 효과적으로 오버라이드하려면 해당 anatomy에 연결하는 것을 권장해요. 슬롯 레시피는 theme.slotRecipes 객체에 추가해요.