文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在接下来的13中使用mantine

问如何在接下来的13中使用mantine
EN

Stack Overflow用户

提问于 2022-11-05 15:13:08

回答 1查看 597关注 0票数 0

我试着用NextJS 13使用应用程序目录来使用mantine，我必须在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>
    
  );
}

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

reactjs

next.js

mantine

回答 1

Stack Overflow用户

发布于 2022-11-06 19:12:32

所以我也对解决这个问题很感兴趣。

第一步是将第三方提供程序移动到“仅限客户端”组件。https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components

下一步是在曼蒂娜的github上使用跟着这条线，同时解决与情感和next13的兼容性问题。

最后，使用新的这似乎是唯一的官方实现示例。应用目录使用Next.js的github。下面是他们如何处理它的方法：

/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>
  );
}

希望这能有所帮助。如果你能用的话，请告诉我

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74328955

复制

相似问题

问如何在接下来的13中使用mantine
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在接下来的13中使用mantineEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在接下来的13中使用mantine
EN