自定义断点定义在breakpoints 你的主题属性中。

const config = defineConfig({
  theme: {
    breakpoints: {
      xl: "80em" ,
      "2xl": "96em" ,
      "3xl": "120em" ,
      "4xl": "160em" ,
    },
  },
})

export const system = createSystem(defaultConfig, config)

接下来，将新的 system 添加到你的 components/ui/provider.tsx 文件中

"use client"

import { system } from "@/components/theme"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

然后，运行 CLI typegen 命令来生成类型。

npx chakra typegen ./components/theme.ts

使用断点

配置完成后，你可以在编写响应式样式时使用这些断点。

<Box fontSize={{ base: "sm", "4xl": "lg" }}>Hello world</Box>