next.js 如何使用mantine UI与下一个13

mxg2im7a 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(210)

我试图使用mantine UI与NextJS 13使用应用程序目录，我必须 Package 在MantineProvider组件中的一切，但我不知道把它放在哪里。
我试过这个
layout.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>
    
  );
}

但没有成功，有什么解决办法吗？？

next.js

来源：https://stackoverflow.com/questions/74328955/how-to-use-mantine-ui-with-next-13

1条答案

按热度按时间

mzsu5hc01#

所以我也对解决这个问题很感兴趣。
第1步是将第三方提供商迁移到“仅客户端”组件。* 请参阅此处 *
下一步是在mantine的github上follow this thread，同时解决与emotion的兼容性问题& next 13
最后，在Mantine的github上使用Mantine和新的Next.js应用目录创建this seems to be the only official implementation example。

/应用程序/情感.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>
  )
}

/应用程序/版面配置.tsx*

import RootStyleRegistry from './emotion';

export default function RootLayout({ children }) {
  return (
   <html lang="en-US">
     <head />
     <body>
       <RootStyleRegistry>{children}</RootStyleRegistry>
     </body>
   </html>
  );
}

希望这能帮上忙。如果你能用的话就告诉我

赞(0）回复(0）举报 2022-11-23

我来回答

next.js 如何使用mantine UI与下一个13

1条答案

相关问题

热门标签

最新问答