在 Vite 中使用 Chakra

在 Vite.js 项目中安装 Chakra UI 的指南

模板

使用下面的 Vite 模板快速开始。

Vite 模板

安装

所需的最低 Node 版本为 Node.20.x

安装依赖

npm i @chakra-ui/react @emotion/react

添加代码片段

代码片段是预构建的组件，可以帮助您更快地构建 UI。使用 @chakra-ui/cli 可以将代码片段添加到您的项目中。

npx @chakra-ui/cli snippet add

更新 tsconfig

如果您使用 TypeScript，请确保 tsconfig.app.json 文件中的 compilerOptions 包含以下内容

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

如果您使用 JavaScript，请创建一个 jsconfig.json 文件并将上述代码添加到该文件中。

设置 Provider

在应用程序的根目录中使用 Provider 组件包裹您的应用程序。

该 Provider 包含以下内容

来自 @chakra-ui/react 的 ChakraProvider 用于样式系统
来自 next-themes 的 ThemeProvider 用于颜色模式

src/main.tsx

import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

设置 Vite 配置路径

在您的项目中，设置 Vite 配置路径以使用命令自动同步 tsconfig 和 Vite

npm i -D vite-tsconfig-paths

更新 vite.config.ts 文件

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"

// https://vite.ac.cn/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

尽情使用！

借助代码片段和 Chakra UI 的基本组件的强大功能，您可以更快地构建 UI。

import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

Storybook

Shadow DOM