You*_*mic 10 reactjs next.js mantine
我试图使用 app 目录将 mantine UI 与 NextJS 13 一起使用，我必须将所有内容包装在MantineProvider组件中，但我不知道将其放在哪里。
我试过这个
布局.js
/* eslint-disable @next/next/no-head-element */
import { MantineProvider } from '@mantine/core';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{
/** Put your mantine theme override here */
colorScheme: 'dark',
}}>
<html>
<head></head>
<body>{children}</body>
</html>
</MantineProvider>
);
}
而且没有效果，请问有什么解决办法吗？？
nic*_*elo 28
所以我也对解决这个问题感兴趣。
第一步是将第三方提供商转移到“仅限客户端”组件。 看这里
下一步是在 mantine 的 github 上关注此线程，同时他们解决情感和 next13 的兼容性问题
最后，这似乎是Mantine github 上唯一使用 Mantine 和新的 Next.js 应用程序目录的官方实现示例。他们是这样处理的：
/app/emotion.tsx
"use client";
import { CacheProvider } from "@emotion/react";
import { useEmotionCache, MantineProvider } from "@mantine/core";
import { useServerInsertedHTML } from "next/navigation";
export default function RootStyleRegistry({
children
}: {
children: React.ReactNode
}) {
const cache = useEmotionCache();
cache.compat = true;
useServerInsertedHTML(() => (
<style
data-emotion={
`${cache.key} ${Object.keys(cache.inserted).join(" ")}`
}
dangerouslySetInnerHTML={{
__html: Object.values(cache.inserted).join(" "),
}}
/>
));
return (
<CacheProvider value={cache}>
<MantineProvider withGlobalStyles withNormalizeCSS>
{children}
</MantineProvider>
</CacheProvider>
)
}
/app/layout.tsx
import RootStyleRegistry from './emotion';
export default function RootLayout({ children }) {
return (
<html lang="en-US">
<head />
<body>
<RootStyleRegistry>{children}</RootStyleRegistry>
</body>
</html>
);
}
希望这可以帮助。如果你能正常工作请告诉我
| 归档时间： |
|
| 查看次数： |
9737 次 |
| 最近记录： |