Chakra 工厂

概述

¥Overview

Chakra 工厂提供了一种从任何 HTML 元素创建增强型 JSX 组件的方法，使它们能够接收 JSX 样式属性。

¥Chakra factory serves as a way to create supercharged JSX component from any HTML element to enable them receive JSX style props.

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

Chakra 工厂可以通过两种方式使用：作为 JSX 元素或工厂函数。

¥The chakra factory can be used in two ways: as a JSX element or as a factory function.

JSX 元素

¥JSX Element

样式属性是 CSS 属性，可以作为属性传递给组件。使用 JSX 工厂，你可以使用 chakra.<element> 语法创建支持样式属性的 JSX 元素。

¥Style props are CSS properties that you can pass as props to your components. With the JSX factory, you can use chakra.<element> syntax to create JSX elements that support style props.

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

const Button = ({ children }) => (
  <chakra.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </chakra.button>
)

工厂函数

¥Factory function

使用 chakra 函数转换原生元素或自定义组件。关键要求是组件必须接受 className 作为 props。

¥Use the chakra function to convert native elements or custom components. The key requirement is that the component must accept className as props.

const Link = chakra("a")

function Example() {
  return <Link bg="red.200" href="https://chakra.nodejs.cn" />
}

另一个使用自定义组件的示例。

¥Another example with a custom component.

import * as RadixScrollArea from "@radix-ui/react-scroll-area"

const ScrollArea = chakra(RadixScrollArea.Root)

function Example() {
  return (
    <ScrollArea>
      <RadixScrollArea.Viewport>
        <div>Hello</div>
      </RadixScrollArea.Viewport>
    </ScrollArea>
  )
}

附加样式

¥Attaching styles

使用 chakra 函数将样式或配方附加到组件。

¥Use the chakra function to attach styles or recipes to components.

const Link = chakra("a", {
  base: {
    bg: "papayawhip",
    color: "red.500",
  },
})

// usage: <Link href="https://chakra.nodejs.cn" />

附加配方

¥Attaching recipes

以下是将配方附加到组件的示例。

¥Here's an example of attaching a recipe to the component.

const Card = chakra("div", {
  base: {
    shadow: "lg",
    rounded: "lg",
    bg: "white",
  },
  variants: {
    variant: {
      outline: {
        border: "1px solid",
        borderColor: "red.500",
      },
      solid: {
        bg: "red.500",
        color: "white",
      },
    },
  },
})

// usage: <Card variant="outline" />

转发属性

¥Forwarding props

默认情况下，chakra 工厂仅过滤与 Chakra 相关的样式属性，使其不进入 DOM。为了更精细地控制属性的转发方式，请传递 shouldForwardProp 选项。

¥By default, the chakra factory only filters chakra related style props from getting to the DOM. For more fine-grained control of how props are forwarded, pass the shouldForwardProp option.

这是一个转发所有不以 $ 开头的 props 的示例。

¥Here's an example that forwards all props that doesn't start with $

function shouldForwardProp(prop: string) {
  return !prop.startsWith("$")
}

const Component = chakra("div", {}, { shouldForwardProp })

要创建自定义转发属性逻辑，请结合使用 Chakra UI 中的 @emotion/is-prop-valid 包和 isValidProperty 包。

¥To create custom forward props logic, combine the @emotion/is-prop-valid package and the isValidProperty from Chakra UI.

import { chakra, defaultSystem } from "@chakra-ui/react"
import shouldForwardProp from "@emotion/is-prop-valid"

const { isValidProperty } = defaultSystem

function shouldForwardProp(prop: string, variantKeys: string[]) {
  const chakraSfp = !variantKeys?.includes(prop) && !isValidProperty(prop)
  return shouldForwardProp(prop) || chakraSfp
}

const Component = chakra("div", {}, { shouldForwardProp })

默认属性

¥Default Props

使用 defaultProps 选项将默认 props 传递给组件。

¥Use the defaultProps option to pass default props to the component.

const Button = chakra(
  "button",
  {
    base: {
      bg: "blue.500",
      color: "white",
    },
  },
  { defaultProps: { type: "button" } },
)

多态性

¥Polymorphism

每个使用 Chakra 工厂创建的组件都可以接受 as 和 asChild props 来更改底层 DOM 元素。

¥Every component created with the chakra factory can accept the as and asChild props to change the underlying DOM element.

<Button as="a" href="https://chakra.nodejs.cn">
  Chakra UI
</Button>

or

<Button asChild>
  <a href="https://chakra.nodejs.cn">Chakra UI</a>
</Button>

了解更多关于 Chakra UI 此处 中的合成