使用高级 Chakra UI 组件更快地构建 💎

了解更多
跳到内容
文档演练场指南博客
赞助商

间距

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

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

示例

以下是在 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)

用法

以下是在 Chakra UI 中使用自定义间距的方法。

<Box margin="128" />

上一个

尺寸

下一个

工具类