当前位置：首页 > news >正文

Next.js 怎么使用 Chakra UI

news 2025/8/3 10:30:59

创建 next.js 的 react 项目

npx create-next-app@latest

? What is your project named? » next-app

之后的选项按自己需要选择

http://localhost:3000 打开网站查看是否正常显示

安装 @chakra-ui

官方文档

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

Add snippets 这步可以不用做，国内网络好像安装不上。

创建 src\components\ui\provider.tsx

"use client";import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
export function Provider({ children }: { children: React.ReactNode }) {return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>;
}

修改 src\app\layout.tsx

import { Provider } from "../components/ui/provider";return (<html lang="en" suppressHydrationWarning><bodyclassName={`${geistSans.variable} ${geistMono.variable} antialiased`}><Provider>{children}</Provider></body></html>);

需要向 html 元素添加 suppressHydrationWarning 属性，以防止出现关于 next-themes 库的警告。

用 Provider 包裹元素才能使用组件。

创建 src\app\chakra.tsx

import { Button, Stack, Highlight, Switch } from "@chakra-ui/react";
export default function Demo() {return (<Stack><Switch.Root><Switch.HiddenInput /><Switch.Control /><Switch.Label>Activate Chakra</Switch.Label></Switch.Root><Highlightquery="spotlight"styles={{ px: "0.5", bg: "orange.subtle", color: "orange.fg" }}>With the Highlight component, you can spotlight words.</Highlight><Button>Click me</Button></Stack>);
}

在 src\app\page.tsx 中引入组件

import Chakra from './chakra'
<Chakra />

现在启动报错：Hydration errors

If you see an error like this: Hydration failed because the initial server rendered HTML did not match the client, and the error looks similar to:

This is caused by how Next.js hydrates Emotion CSS in --turbo mode. Please remove the --turbo flag from your dev script in your package.json file.

是因为用 -turbo 的原因，可以将 package.json 里的 "dev": "next dev --turbopack" 改为 "dev": "next dev"。改完后不报错了，但是编译会变慢。如果不改只是报错可能也没什么影响。

效果图：