开始使用
安装
如何在你的项目中安装并配置 Chakra UI。
提示
所需的最低 Node.js 版本为 20.x。请先运行
node -v 确认你的环境。框架指南
Chakra UI 支持你喜欢的各种框架。我们为常见框架整理了分步指南：
样式方案路线图
目前,Chakra UI 在运行时使用 Emotion 进行样式处理。 我们的长期方向是采用受 Panda CSS 启发的「零运行时」样式模型,并分阶段推进,以便现有应用能够平滑升级。
如果你也想参与,可以查看 贡献指南,为文档、迁移工具与实际应用反馈提出讨论或 PR。
安装步骤
按照以下步骤在你的项目中手动配置 Chakra UI。
1
安装 @chakra-ui/react
安装 Chakra UI 核心包及其对等依赖 Emotion。
bash
npm i @chakra-ui/react @emotion/react2
添加代码片段（Snippets）
代码片段是一些预构建的组件组合，可帮助你更快地搭建 UI。 使用 @chakra-ui/cli 即可将它们添加到项目中。
bash
npx @chakra-ui/cli snippet add3
配置 Provider
在应用根部使用生成于 components/ui/provider 的 Provider 组件包裹整个应用。该 Provider 组合了：
- 来自
@chakra-ui/react的ChakraProvider，用于样式系统 - 来自
next-themes的ThemeProvider，用于颜色模式
tsx
// app/layout.tsx
import { Provider } from "@/components/ui/provider"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}4
更新 tsconfig
如果你使用 TypeScript，需要在 tsconfig 的 compilerOptions 中加入以下选项。 若使用 JavaScript，请创建 jsconfig.json 并写入相同内容。
json
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}5
尽情使用！
借助代码片段与 Chakra UI 的原始组件，你可以更快地构建你的 UI。
tsx
import { Button, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>点击我</Button>
<Button>点击我</Button>
</HStack>
)
}完成!
现在你已经成功配置好 Chakra UI,可以开始构建你的应用了。 本页内容基于 官方英文文档 翻译整理。