geekskai
commented
1 month ago npm i @ant-design/cssinjs
new RootStyleRegistry.tsx file
'use client'
import { useState, type PropsWithChildren } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'
export const RootStyleRegistry = ({ children }: PropsWithChildren) => {
const [cache] = useState(() => createCache())
useServerInsertedHTML(() => {
return (
<script
dangerouslySetInnerHTML={{
__html: `</script>${extractStyle(cache)}<script>`,
}}
/>
)
})
return <StyleProvider cache={cache}>{children}</StyleProvider>
}in the root layout file
import "./globals.css";
import { RootStyleRegistry } from './RootStyleRegistry'
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
return (
<html lang="en">
<body>
<RootStyleRegistry>
{children}
</RootStyleRegistry>
</body>
</html>
);
}
I want to use gradient mode in ColorPicker, but it supports version over 5.20.0, and nextjs-registry is using antd version of ^5.12.5. Can I use gradient mode if antd version of nextjs-registry is updated? And do you have any plan to upgrade the version?