秘诀

了解如何在 Chakra UI 中自定义配方和插槽配方

info

请先阅读 overview 组件，了解如何正确自定义样式引擎并确保类型安全。

¥Please read the overview first to learn how to properly customize the styling engine, and get type safety.

秘诀

¥Recipes

扩展变体

¥Extending variants

使用 defineRecipe 函数定义配方覆盖。

¥Use the defineRecipe function to define a recipe override.

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

¥Here's an example of extending the Button to add a new xl size

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)

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

¥Then you can use the new size variant in your components.

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

添加新变体

¥Adding new variant

使用 defineRecipe 函数定义新的配方变体。

¥Use the defineRecipe function to define a new recipe variant.

以下是定义名为 raised 的布尔变量的示例。

¥Here's an example of defining a boolean variant called raised.

theme.ts

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

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

export const system = createSystem(defaultConfig, customConfig)

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

¥Then you can use the new variant in your components.

<Button raised>Click me</Button>

自定义配方

¥Custom recipe

使用 defineRecipe 函数定义自定义配方。

¥Use the defineRecipe function to define a custom recipe all together.

以下是定义名为 Title 的自定义配方的示例。

¥Here's an example of defining a custom recipe called 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)

然后，使用新的配方创建组件。

¥Then, use the new recipe to create a components

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

插槽配方

¥Slot Recipes

要有效地覆盖现有的插槽配方，我们建议连接到其结构。插槽配方会添加到 theme.slotRecipes 对象。

¥To effectively override an existing slot recipe, we recommend connecting to its anatomy. Slot recipes are added to the theme.slotRecipes object.

扩展变体

¥Extending variants

以下是如何扩展 Alert 插槽配方以创建 xl 尺寸的示例。

¥Here's an example of how to extend the Alert slot recipe to create an xl size.

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)

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

¥Then you can use the new size variant in your components.

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

添加新变体

¥Adding new variant

以下是如何扩展 Alert 插槽配方以添加名为 shape 的新变体的示例。

¥Here's an example of how to extend the Alert slot recipe to add a new variant called 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)

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

¥Then you can use the new variant in your components.

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

自定义配方

¥Custom recipe

以下示例展示了如何定义名为 Navbar 的自定义插槽配方。

¥Here's an example of how to define a custom slot recipe called 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)

然后，你可以使用新的配方创建组件。

¥Then you can use the new recipe to create a components

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

尺寸