当前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>
);
}