我正在尝试在我的 Next.js v13.1.6
中使用 Chakra UI v2.4.9
,遵循与 Next.js 集成的 Chakra UI 指南,但它无法工作。
我正在使用包含 app/
和 pages/
的 src/
文件夹。如提供程序设置步骤所说,我创建了 _app.js
文件,并具有以下内容:
// src/_app.js
import { ChakraProvider } from '@chakra-ui/react'
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
然后我尝试在我的src/app/page.js
中使用Chakra元素,如下所示:
"use client"
import Image from 'next/image'
import { Inter } from '@next/font/google'
import styles from './page.module.css'
import { Button } from '@chakra-ui/react'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return <div>
<h1>Hello Chakra UI</h1>
<Button colorScheme={"red"}>CLICK ME</Button>
</div>
}
它显示了没有任何样式的按钮,不像 Chakra UI 的 Button
带有红色配色方案。
我认为问题在于 _app.js
文件位置,它目前位于 src/_app.js
,我尝试将文件放置在以下位置:
/_app.js
项目根目录/src/_app.js
src 文件夹的根目录(当前位置)/src/pages/_app.js
按照 Chakra UI 文档所说的位置/src/app/_app.js
但仍然无法正常工作。