NextJS 引入 Ant-Design 样式闪烁问题

按照这里给的样例，抽出关键代码即可

步骤：

安装包：

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

引入这俩文件

genAntdCss.tsx: 会帮我们生成 ./public/antd.min.css

// src/scripts/genAntdCss.tsx

import { extractStyle } from "@ant-design/static-style-extract";
import fs from "fs";

const outputPath = "./public/antd.min.css";

// 1. default theme

const css = extractStyle();

// 2. With custom theme

// const css = extractStyle(withTheme);

fs.writeFileSync(outputPath, css);

console.log(` Antd CSS generated at ${outputPath}`);

tsconfig.node.json:

{
  "compilerOptions": {
    "strictNullChecks": true,
    "module": "NodeNext",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

package.json 加入脚本，帮我们提前执行 genAntdCss.tsx

{
    "predev": "ts-node --project ./tsconfig.node.json ./src/scripts/genAntdCss.tsx",
    "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./src/scripts/genAntdCss.tsx"
}

引入 '../../public/antd.min.css':

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import '../../public/antd.min.css';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

即可。