尺寸

了解如何在 Chakra UI 中定制尺寸

信息

请先阅读概览，以了解如何正确定制样式引擎并获得类型安全。

示例

这是一个在 Chakra UI 中定制尺寸的示例。

theme.ts

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

const customConfig = defineConfig({
  theme: {
    tokens: {
      sizes: {
        "1/7": { value: "14.285%" },
        "2/7": { value: "28.571%" },
        "3/7": { value: "42.857%" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

用法

将任何与尺寸相关的属性（如 width、height、minWidth、minHeight、maxWidth、maxHeight 等）的值设置为 sizes 令牌。

<Box width="1/7" height="2/7" />

配方

间距