断点

了解如何在 Chakra UI 中自定义断点

信息

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

示例

这里是如何在 Chakra UI 中自定义断点的示例。

theme.ts

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

const config = defineConfig({
  theme: {
    breakpoints: {
      tablet: "992px",
      desktop: "1200px",
      wide: "1400px",
    },
  },
})

export default createSystem(defaultConfig, config)

用法

使用响应式属性时，请参考新的断点。

App.tsx

<Box fontSize={{ base: "16px", tablet: "18px", desktop: "20px" }}>Hello</Box>

动画

颜色