logo标签列表

在 Next.js 的新应用程序文件夹中设置 Chakra UI。

javascriptreactjsnext.jschakra-ui
3

我正在尝试在我的 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

但仍然无法正常工作。

1个回答
3

看起来 Chakra 文档只警告了 app 目录，而另一个部分是针对 pages 文件夹，就像旧版本一样。如果要在 app 文件夹中使用任何上下文，请阅读新文档中的 context 部分。按照这个方法操作：

// app/theme-provider.js 

'use client';

import { ChakraProvider } from '@chakra-ui/react'

export default function ThemeProvider({ children }) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider >
  );
}


// app/layout.js 

import ThemeProvider from './theme-provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}


// app/page.js 

"use client";

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

export default function Home() {
  return (
    <div>
      <h1>Hello Chakra UI</h1>
      <Button colorScheme={"red"}>CLICK ME</Button>
    </div>
  );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接