安装

安装@chakra-ui/react

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

添加代码片段

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

npx @chakra-ui/cli snippet add

设置提供者

在应用程序的根目录中，使用 components/ui/provider 组件生成的 Provider 组件包裹您的应用程序。

此提供者包含以下内容

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

import { Provider } from "@/components/ui/provider"

function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

更新 tsconfig

如果您正在使用 TypeScript，您需要更新 tsconfig 文件中的 compilerOptions 以包含以下选项

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

尽情享受！

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

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

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