react项目引入ant-design

当前react版本为：

1、安装antd

npm install antd --save

不需要安装babel-plugin-import，否则会报各种问题

2、引入Ant Design 样式

为了确保 Ant Design 样式在页面中生效，你需要在 _app.js 文件中全局引入样式。

当前项目用的Next.js。Next.js 使用 _app.js 来定制全局的应用布局和样式。你需要在 pages/_app.js 中引入 Ant Design 的样式文件。

// pages/_app.js
import 'antd/dist/reset.css';  // 引入 Ant Design 样式
import '../styles/globals.css'; // 如果你有自定义的全局样式文件
import { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return ;
}

export default MyApp;

3、引入 Ant Design 组件 

在任意 React 页面或组件中使用 Ant Design 组件时，直接按需引入。比如在 pages/index.js 中，你可以引入一个按钮组件：

import { Button } from 'antd';

export default function Home() {
  return (
    

      
Welcome to Next.js with Ant Design
      Primary Button
    
  );
}

---

记录一下