断点

了解如何在 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 breakpoints in 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)

用法

¥Usage

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

¥When using responsive properties, reference the new breakpoints.

App.tsx

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

动画

颜色