我们很高兴地宣布 Chakra UI 的发布v3.16。此版本带来了新功能，包括覆盖管理器组件，以及旨在提升您开发体验的改进。

覆盖管理器

在构建现代 Web 应用程序时，您经常需要显示覆盖主内容的临时 UI 元素。这些元素——通常是模态框、对话框、抽屉或警报——对于用户交互至关重要，但通过编程方式管理它们可能具有挑战性。

使用 Chakra UI 的覆盖管理器，您可以

• 在代码库的任何地方打开和关闭覆盖层
• 向覆盖层传递数据并接收返回值
• 无需重新渲染整个组件即可更新覆盖层内容
• 以受控生命周期管理多个覆盖层

覆盖管理器的基础是 createOverlay 函数

import { Button, Dialog, Portal, createOverlay } from "@chakra-ui/react"

interface DialogProps {
  title: string
  description?: string
  content?: React.ReactNode
}

const dialog = createOverlay<DialogProps>((props) => {
  const { title, description, content, ...rest } = props
  return (
    <Dialog.Root {...rest}>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            {title && (
              <Dialog.Header>
                <Dialog.Title>{title}</Dialog.Title>
              </Dialog.Header>
            )}
            <Dialog.Body spaceY="4">
              {description && (
                <Dialog.Description>{description}</Dialog.Description>
              )}
              {content}
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
})

创建覆盖层后，您可以在组件中使用它

export const MyComponent = () => {
  return (
    <>
      <Button
        onClick={() => {
          dialog.open("a", {
            title: "Dialog Title",
            description: "Dialog Description",
          })
        }}
      >
        Open Modal
      </Button>
      <dialog.Viewport />
    </>
  )
}

<dialog.Viewport /> 组件至关重要——它是您的覆盖层将被渲染的地方。请不要忘记将其包含在您的组件树中。

其他改进

• 全局 CSS：我们改进了所有调色板的文本选择对比度

• 系统：增加了对 borderEnd 简写样式属性的支持。

<Box borderEnd="2px solid red">
  <Text>Hello</Text>
</Box>

• 所有组件：柔化了所有调色板的焦点环，使其更加微妙。

升级

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

npm install @chakra-ui/react@latest