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

了解更多
发布·

2025年1月9日

Chakra 3.3

SA

Segun Adebayo

@thesegunadebayo

我们很高兴地宣布 Chakra UI v3.3.0 发布！本次发布带来了多项令人兴奋的新功能和改进，以提升您的开发体验。

二维码

新的QRCode 组件允许用户为各种用例生成二维码。此组件非常适合需要生成二维码以共享信息的应用程序。

import { QrCode } from "@chakra-ui/react"

const Demo = () => {
  return (
    <QrCode.Root value="https://www.google.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

新示例

带粘贴事件的文件上传

我们展示了如何使用 FileUpload 组件处理从剪贴板粘贴的文件。

"use client"

import {
  FileUpload,
  Float,
  HStack,
  Input,
  type InputProps,
  useFileUploadContext,
} from "@chakra-ui/react"
import { HiX } from "react-icons/hi"

const FilePasteInput = (props: InputProps) => {
  const fileUpload = useFileUploadContext()
  return (
    <Input
      {...props}
      onPaste={(e) => {
        fileUpload.setClipboardFiles(e.clipboardData)
      }}
    />
  )
}

const FileImageList = () => {
  const fileUpload = useFileUploadContext()
  return (
    <HStack wrap="wrap" gap="3">
      {fileUpload.acceptedFiles.map((file) => (
        <FileUpload.Item
          p="2"
          width="auto"
          key={file.name}
          file={file}
          pos="relative"
        >
          <Float placement="top-start">
            <FileUpload.ItemDeleteTrigger
              p="0.5"
              rounded="l1"
              bg="bg"
              borderWidth="1px"
            >
              <HiX />
            </FileUpload.ItemDeleteTrigger>
          </Float>
          <FileUpload.ItemPreviewImage
            boxSize="12"
            rounded="l1"
            objectFit="cover"
          />
        </FileUpload.Item>
      ))}
    </HStack>
  )
}

const Demo = () => {
  return (
    <FileUpload.Root maxFiles={3} accept="image/*">
      <FileUpload.HiddenInput />
      <FileImageList />
      <FilePasteInput placeholder="Paste image here..." />
    </FileUpload.Root>
  )
}

我们展示了如何在使用 hideWhenDetached 定位选项时，在菜单与其触发器分离时隐藏菜单内容。

项目0

项目1

项目2

项目3

项目4

项目5

import { Box, Center, Flex, Menu, Portal, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Center minH="sm">
      <Flex
        w="300px"
        h="full"
        overflowX="auto"
        gapX="6"
        p="4"
        borderWidth="1px"
        bg="bg.subtle"
      >
        {[...Array(6).keys()].map((x) => (
          <Box layerStyle="fill.surface" p="4" borderRadius="md" key={x}>
            <Text>Item{x}</Text>
          </Box>
        ))}
        <Box>
          <Menu.Root positioning={{ hideWhenDetached: true }}>
            <Menu.Trigger asChild>
              <Box as="button" bg="green.100" p="4" borderRadius="md">
                Menu
              </Box>
            </Menu.Trigger>
            <Portal>
              <Menu.Positioner>
                <Menu.Content>
                  <Menu.Item value="new-txt">New Text File</Menu.Item>
                  <Menu.Item value="new-file">New File...</Menu.Item>
                  <Menu.Item value="new-win">New Window</Menu.Item>
                  <Menu.Item value="open-file">Open File...</Menu.Item>
                  <Menu.Item value="export">Export</Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
        </Box>
      </Flex>
    </Center>
  )
}

CLI 改进

我们增强了 CLI，提供了更灵活的代码片段安装选项

新的 --tsx 标志

默认情况下，CLI 会检测您的项目是否为 TypeScript 项目，并安装相应的 jsx 或 tsx 代码片段。

使用此标志，您可以明确安装 jsx 或 tsx 代码片段。

npx @chakra-ui/cli@latest snippet add [...components] --tsx

错误修复

本次发布还包括重要的错误修复

升级

要升级到最新版本，请运行

npm install @chakra-ui/react@latest