如何在Next.js 13项目中引入Ant Design并自定义主题与组件

1. 安装依赖 #

首先安装Ant Design核心包和样式处理依赖：

npm install antd @ant-design/cssinjs
# 或使用 yarn
yarn add antd @ant-design/cssinjs
# 或使用 pnpm
pnpm add antd @ant-design/cssinjs

2. 全局配置（App Router 模式） #

Next.js 13 默认使用 App Router，需在根布局文件中配置Ant Design的全局样式和主题容器：

// app/layout.tsx
'use client';
import { ConfigProvider } from 'antd';
import { StyleProvider } from '@ant-design/cssinjs';
import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'Next.js + Ant Design',
  description: '集成Ant Design的Next.js 13项目',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 配置样式优先级，避免与其他样式库冲突 */}
        <StyleProvider hashPriority="high">
          {/* Ant Design全局配置容器 */}
          <ConfigProvider>
            {children}
          </ConfigProvider>
        </StyleProvider>
      </body>
    </html>
  );
}

3. 自定义主题配置 #

通过ConfigProvider的theme属性，可全局修改主题色、圆角、字体等基础样式，也能单独定制某类组件的样式：

// 修改app/layout.tsx中的ConfigProvider部分
<ConfigProvider
  theme={{
    // 全局主题token配置
    token: {
      colorPrimary: '#1890ff', // 自定义主色调
      borderRadius: 8, // 全局圆角大小
      fontSize: 14, // 基础字体尺寸
      colorSuccess: '#52c41a', // 成功状态色
    },
    // 单独组件样式定制
    components: {
      Button: {
        colorPrimary: '#722ed1', // 仅修改按钮组件的主色
        borderRadius: 4, // 按钮圆角
      },
      Input: {
        colorBorder: '#d9d9d9', // 输入框边框色
      },
    },
  }}
>
  {children}
</ConfigProvider>

4. Page Router 模式适配 #

如果你的项目仍使用传统Page Router，需在pages/_app.tsx中完成全局配置：

// pages/_app.tsx
import { ConfigProvider } from 'antd';
import { StyleProvider } from '@ant-design/cssinjs';
import type { AppProps } from 'next/app';
import '../styles/globals.css';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <StyleProvider hashPriority="high">
      <ConfigProvider
        theme={{
          token: { colorPrimary: '#1890ff' },
          // 其他主题配置同上
        }}
      >
        <Component {...pageProps} />
      </ConfigProvider>
    </StyleProvider>
  );
}

5. 使用Ant Design组件 #

在客户端组件中直接引入并使用Ant Design组件即可（注意添加'use client'指令）：

// app/page.tsx
'use client';
import { Button, Input, Space } from 'antd';

export default function Home() {
  return (
    <div style={{ padding: 24 }}>
      <h1>Next.js 13 + Ant Design 示例</h1>
      <Space direction="vertical" size="middle">
        <Input placeholder="请输入内容" />
        <Button type="primary">提交</Button>
      </Space>
    </div>
  );
}

注意事项 #

• 若项目同时使用Tailwind CSS，需在tailwind.config.js的content字段中排除node_modules/antd目录，避免样式冲突。
• 所有使用Ant Design组件的文件都需添加'use client'指令，因为Ant Design基于React客户端特性实现。

内容的提问来源于stack exchange，提问作者lionr learn