食谱

了解如何在 Chakra UI 中自定义食谱和插槽食谱

信息

请阅读概述，首先了解如何正确自定义样式引擎并获得类型安全。

食谱

扩展变体

使用defineRecipe 函数来定义食谱覆盖。

以下是扩展 Button 以添加新的 xl 尺寸的示例

theme.ts

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>

添加新变体

使用 defineRecipe 函数来定义新的食谱变体。

以下是定义一个名为 raised 的布尔变体的示例。

theme.ts

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>

自定义食谱

使用 defineRecipe 函数来完整定义一个自定义食谱。

以下是定义一个名为 Title 的自定义食谱的示例

theme.ts

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} />
}

插槽食谱

为了有效地覆盖现有的插槽食谱，我们建议连接到其解剖结构。插槽食谱会添加到 theme.slotRecipes 对象中。

扩展变体

以下是扩展 Alert 插槽食谱以创建 xl 尺寸的示例。

theme.ts

import { alertAnatomy } from "@chakra-ui/react/anatomy"

const alertSlotRecipe = defineSlotRecipe({
  slots: alertAnatomy.keys(),
  variants: {
    size: {
      xl: {
        root: {
          fontSize: "lg",
          px: 6,
          py: 3,
        },
      },
    },
  },
})

const customConfig = defineConfig({
  theme: {
    slotRecipes: {
      alert: alertSlotRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

然后你可以在组件中使用新的尺寸变体。

<Alert size="xl" title="..." />

添加新变体

以下是扩展 Alert 插槽食谱以添加一个名为 shape 的新变体的示例。

theme.ts

import { alertAnatomy } from "@chakra-ui/react/anatomy"

const alertSlotRecipe = defineSlotRecipe({
  slots: alertAnatomy.keys(),
  variants: {
    shape: {
      rounded: {
        root: { borderRadius: "full" },
      },
    },
  },
})

const customConfig = defineConfig({
  theme: {
    slotRecipes: {
      alert: alertSlotRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

然后你可以在组件中使用新的变体。

<Alert shape="rounded" title="..." />

自定义食谱

以下是定义一个名为 Navbar 的自定义插槽食谱的示例。

theme.ts

const navbarSlotRecipe = defineSlotRecipe({
  slots: ["root", "badge", "icon"],
  base: {
    root: {
      bg: "blue.500",
      color: "white",
      px: 4,
      py: 2,
    },
    badge: {
      borderRadius: "full",
      px: 2,
      py: 1,
    },
  },
})

const customConfig = defineConfig({
  theme: {
    slotRecipes: {
      navbar: navbarSlotRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

然后你就可以使用新的食谱来创建组件

const Navbar = (props) => {
  const recipe = useSlotRecipe({ key: "navbar" })
  const styles = recipe()
  return (
    <Box css={styles.root}>
      {props.children}
      <Box css={styles.badge} />
      <Box css={styles.icon} />
    </Box>
  )
}

全局CSS

尺寸