What is causing the compatibility issue between Ant Design V5 styles and NextJS?

Question

What is causing the compatibility issue between Ant Design V5 styles and NextJS?

Description

In my NextJS project, I am using the Ant Design V5 framework with multiple pages. However, I am facing an issue where the styles are only working correctly on one page and not being applied properly on other pages. Despite referring to the official documentation and examples from Ant's GitHub repository, I couldn't resolve this styling inconsistency.

Questions

These are the questions puzzling me:

What makes that particular page behave differently with the styles?
Why are the styles failing to work as expected on other pages?

Links

Link to my repository (branch: isolated-ant-bug)
Working page - http://localhost:3000/en/m/main
Broken page - http://localhost:3000/en/m/home
Page with broken styles - http://localhost:3000/en
Official Ant Design document - https://ant.design/docs/react/use-with-next
Ant Design examples on GitHub - https://github.com/ant-design/ant-design-examples/tree/main/examples

Isolated Codes:

pages/_app.tsx

import { FC } from 'react'
import { AppProps } from 'next/app'
import { ConfigProvider } from 'antd'
import '../styles/globals.css'
import 'typeface-rubik/index.css'


const MyApp: FC<AppProps> = ({ Component, pageProps }) => (
       <ConfigProvider
          theme={{
            token: {
              fontFamily: '"Rubik", sans-serif',
            }
          }}
      >
        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
        <Component {...pageProps} />
      </ConfigProvider>
)
...

Dependencies

{
  // JSON dependency list
}

Next.js Config

 
// JavaScript configuration for Next.js

Screenshots

Screenshot of /home page: (link)

css reactjs next.js antd

Answer 1

Answer №1

When faced with this issue, I found a solution by utilizing the _document.tsx script

import Document, { Html, Head, Main, NextScript } from 'next/document'
    import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'
    
    type MyDocumentProps = {
      styles: React.ReactNode
    }
    
    export class MyDocument extends Document<MyDocumentProps> {
      render() {
        return (
          <Html lang="en">
            <Head>{this.props.styles}</Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }
    }
    
    MyDocument.getInitialProps = async (ctx) => {
      const originalRenderPage = ctx.renderPage
      const cache = createCache()
    
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) =>
            function EnhanceApp(props) {
              return (
                <StyleProvider cache={cache}>
                  <App {...props} />
                </StyleProvider>
              )
            },
        })
    
      const initialProps = await Document.getInitialProps(ctx)
    
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <style dangerouslySetInnerHTML={{ __html: extractStyle(cache) }} />
          </>
        ),
      }
    }
    
    export default MyDocument

Answer 2

When faced with this issue, I found a solution by utilizing the _document.tsx script

import Document, { Html, Head, Main, NextScript } from 'next/document'
    import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'
    
    type MyDocumentProps = {
      styles: React.ReactNode
    }
    
    export class MyDocument extends Document<MyDocumentProps> {
      render() {
        return (
          <Html lang="en">
            <Head>{this.props.styles}</Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }
    }
    
    MyDocument.getInitialProps = async (ctx) => {
      const originalRenderPage = ctx.renderPage
      const cache = createCache()
    
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) =>
            function EnhanceApp(props) {
              return (
                <StyleProvider cache={cache}>
                  <App {...props} />
                </StyleProvider>
              )
            },
        })
    
      const initialProps = await Document.getInitialProps(ctx)
    
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <style dangerouslySetInnerHTML={{ __html: extractStyle(cache) }} />
          </>
        ),
      }
    }
    
    export default MyDocument

Answer 3

Answer №2

I also utilize antd and nextjs in my projects. Instead of using .css files for styles, I prefer to handle them with .ts files. You can check out a simple example that I created here.

While the example may not directly involve nextjs, you can easily incorporate it into your _app file by following these steps:

// Import default antd CSS styles
import 'antd/dist/reset.css'

function _app( {
  Component,
  pageProps
}: AppProps ): ReactNode {

  ....

  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: "#f00"
          }
        }
      }}
    >
      <Component { ...pageProps } />
    </ThemeProvider>
  )
}

Answer 4

I also utilize antd and nextjs in my projects. Instead of using .css files for styles, I prefer to handle them with .ts files. You can check out a simple example that I created here.

While the example may not directly involve nextjs, you can easily incorporate it into your _app file by following these steps:

// Import default antd CSS styles
import 'antd/dist/reset.css'

function _app( {
  Component,
  pageProps
}: AppProps ): ReactNode {

  ....

  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: "#f00"
          }
        }
      }}
    >
      <Component { ...pageProps } />
    </ThemeProvider>
  )
}

Answer 5

Answer №3

After numerous attempts, I finally identified the issue. In development mode, the css classnames perfectly align with the styles, having a prefix of css-dev-only-do-not-override. However, when switching to production mode, the classnames in the style files receive just the css prefix while the elements still retain the css-dev-only-do-not-override. While a standard CLI handles the transition between prefixes automatically, using a custom build and run script requires setting the node environment explicitly. Below are examples for building and running:

const cli = require('next/dist/cli/next-build')
process.env.NODE_ENV = 'production'
cli.nextBuild()

const cli = require('next/dist/cli/next-start')
process.env.NODE_ENV = 'production'
cli.nextStart(
  [
    '--port', process.env.PORT,
    '--hostname', process.env.HOSTNAME,
  ],
)

Answer 6

After numerous attempts, I finally identified the issue. In development mode, the css classnames perfectly align with the styles, having a prefix of css-dev-only-do-not-override. However, when switching to production mode, the classnames in the style files receive just the css prefix while the elements still retain the css-dev-only-do-not-override. While a standard CLI handles the transition between prefixes automatically, using a custom build and run script requires setting the node environment explicitly. Below are examples for building and running:

const cli = require('next/dist/cli/next-build')
process.env.NODE_ENV = 'production'
cli.nextBuild()

const cli = require('next/dist/cli/next-start')
process.env.NODE_ENV = 'production'
cli.nextStart(
  [
    '--port', process.env.PORT,
    '--hostname', process.env.HOSTNAME,
  ],
)

Answer 7

Answer №4

One straightforward solution is to extract the Ant Design CSS and import it into the root layout as shown below:

import '@/app/styles/antd.min.css';
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) 
{
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Steps to extract the CSS:

1) Install in your project

npm i @ant-design/static-style-extract

2) Create a script file

// scripts/genAntdCss.mjs
import fs from 'fs';
import { extractStyle } from '@ant-design/static-style-extract';

const outputPath = './app/styles/antd.min.css';

const css = extractStyle();
fs.writeFileSync(outputPath, css);

3) Add run command to package.json

  "scripts": {
    ...
    "antcss": "node ./scripts/genAntdCss.mjs"
  }

4) Create a directory path in your project

my-app/app/styles

5) Run the script

npm run antcss

Voila! Your Ant Design styles should now function correctly

Credits: https://github.com/ant-design/ant-design/issues/38555#issuecomment-1471908738

Answer 8

One straightforward solution is to extract the Ant Design CSS and import it into the root layout as shown below:

import '@/app/styles/antd.min.css';
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) 
{
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Steps to extract the CSS:

1) Install in your project

npm i @ant-design/static-style-extract

2) Create a script file

// scripts/genAntdCss.mjs
import fs from 'fs';
import { extractStyle } from '@ant-design/static-style-extract';

const outputPath = './app/styles/antd.min.css';

const css = extractStyle();
fs.writeFileSync(outputPath, css);

3) Add run command to package.json

  "scripts": {
    ...
    "antcss": "node ./scripts/genAntdCss.mjs"
  }

4) Create a directory path in your project

my-app/app/styles

5) Run the script

npm run antcss

Voila! Your Ant Design styles should now function correctly

Credits: https://github.com/ant-design/ant-design/issues/38555#issuecomment-1471908738

What is causing the compatibility issue between Ant Design V5 styles and NextJS?

Description

Questions

Links

Isolated Codes:

Dependencies

Next.js Config

Screenshots

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

React component fails to re-render after state change

Completion status of circle loader: 100%

Utilizing React JS and lodash's get method within a single function

Adjusting height in Google Maps to fill the remaining space

Unlocking the Mysterious Realm of HTML

Multer ensures that all fields are validated before proceeding with the upload process

I'm curious, which ref tag should I utilize for draft.js?

What is the best approach to developing a reusable function for managing the active className in React code?

Having trouble changing the chosen selection in the material UI dropdown menu

Is there a way to transmit React code using Express?

When applying multiple classes with NgClass, use the property name instead of the class content

Utilizing ReactStrap: a guide to retrieving the id of the chosen dropDownItem

Securing your folders with Next Auth middleware

Span tag not respecting CSS width property

Using ReactJS with Material UI and applying styles with withStyles including themes in TypeScript

Tips for maintaining the default arrow icon for HTML select elements

How come my container-fluid div isn't encompassing the box divs too?

Getting started with editing and selecting a row using an onClick event in DataGrid

Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

Encounter an incorrect route in react-router