Nextjs中引入antd,样式兼容,react19支持

773 阅读1分钟

解决antd 兼容 react 19

git 官方解决方案:github.com/ant-design/… antd官方解决方案:ant.design/docs/react/…

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='zh'>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <AntdProvider>
          <AntdRegistry>{children}</AntdRegistry>
        </AntdProvider>
      </body>
    </html>
  )
}

解决刷新 antd 样式丢失 引入 AntdRegistry

引入的 antd 组件在首屏并没有样式,下面就需要根据 Next.js 的模式来选择不同的 SSR 样式处理方式。

官方网站 ant-design.antgroup.com/docs/react/…