I am using Next.js with Ant Design. After I build my project and started running it, the button appears with no style ( no bgcolor or text color ). Only after a page refresh it shows the styles. Later for each button customization, the page needs a reload for the button to appear with its styles.
Why it's happening and how to solve it?
My index.tsx
import { Inter } from "next/font/google";
import { Montserrat } from "next/font/google";
import React from "react";
import HomePage from "../components/Home/AforcHome";
// const inter = Inter({ subsets: ["latin"] });
const montserrat = Montserrat({ subsets: ["cyrillic"] });
const Home = () => (
<main className={`App ${montserrat.className}`}>
<HomePage />
</main>
);
export default Home;
My _app.tsx
import "@/styles/globals.css";
import React from "react";
import { ConfigProvider } from "antd";
import type { AppProps } from "next/app";
import theme from "../theme/themeConfig";
const App = ({ Component, pageProps }: AppProps) => (
<ConfigProvider theme={theme}>
<Component {...pageProps} />
</ConfigProvider>
);
export default App;
My _document.tsx
import React from "react";
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
import Document, { Head, Html, Main, NextScript } from "next/document";
import type { DocumentContext } from "next/document";
const MyDocument = () => (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const cache = createCache();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) => (props: any) =>
(
<StyleProvider cache={cache}>
<App {...props} />
</StyleProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
const style = extractStyle(cache, true);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style dangerouslySetInnerHTML={{ __html: style }} />
</>
),
};
};
export default MyDocument;
The button component
<Form.Item
wrapperCol={{ span: 24, offset: 0 }}
className=" text-center"
>
<ConfigProvider
theme={{
token: {
colorPrimary: "#444690",
colorTextLightSolid: "#ffffff",
borderRadius: 4,
},
components: {
Button: {
fontWeight: "medium",
},
},
}}
>
<Button type="primary">Register</Button>
</ConfigProvider>
</Form.Item>