当前位置：首页 > article >正文

react项目引入ant-design

article 2024/10/8 11:06:04

当前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 <Component {...pageProps} />;
}

export default MyApp;

3、引入 Ant Design 组件

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

import { Button } from 'antd';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with Ant Design</h1>
      <Button type="primary">Primary Button</Button>
    </div>
  );
}