英文:
Setup Chakra UI in Next.js's new app folder
问题
我正在尝试在我的 Next.js v13.1.6 项目中使用 Chakra UI v2.4.9，按照Chakra UI与Next.js的逐步指南进行设置，但它不起作用。
我正在使用包含 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 文件夹的根目录
/src/_app.js（当前位置） - 如 Chakra UI 文档所述的
/src/pages/_app.js /src/app/_app.js
但仍然不起作用。
英文:
I am trying to use Chakra UI v2.4.9 with my Next.js v13.1.6 following the the Chakra UI step-up guide with Next.js, but it doesn't work.
I am using the src/ folder which contains app/ and pages/. as the provider step up says I created the _app.js file with the following content
// src/_app.js
import { ChakraProvider } from '@chakra-ui/react'
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
Then I tried to use Chakra elements in my src/app/page.js as follows:
"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>
}
It shows the button without any style, Not like the Chakra UI Button with the red color scheme.
I thought the issue was the _app.js file location that it is currently in src/_app.js and tried putting the file at
/_app.jsat the project root/src/_app.jsroot of src folder (current)/src/pages/_app.jsas the Chakra UI docs says/src/app/_app.js
And it is still not working.
答案1
得分: 3
以下是翻译好的部分：
"It seems like the Chakra documentation only warned about the app directory, and the other part is for the pages folder, like in older versions. To use any context in the app folder, I suggest you read the context part of the new doc. Following that, you would do it like so:
// 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>
);
}
```"
<details>
<summary>英文:</summary>
It seems like the Chakra documentation only warned about the `app` directory, and the other part is for the `pages` folder, like in older versions. To use any context in the `app` folder, I suggest you read the [context](https://beta.nextjs.org/docs/rendering/server-and-client-components#context) part of the new doc. Following that, you would do it like so:
```react
// 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>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论