间距

了解如何在 Chakra UI 中自定义间距

info

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

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

示例

¥Example

以下是如何在 Chakra UI 中自定义间距的示例。

¥Here's an example of how to customize spacing in Chakra UI.

theme.ts

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

const customConfig = defineConfig({
  theme: {
    tokens: {
      spacing: {
        "128": { value: "32rem" },
        "144": { value: "36rem" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

用法

¥Usage

以下是如何在 Chakra UI 中使用自定义间距。

¥Here's how to use the custom spacing in Chakra UI.

<Box margin="128" />

尺寸

实用程序