react项目引入ant-design

vanora1111

已于 2024-10-08 09:35:41 修改

阅读量974

点赞数 2

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

于 2024-10-08 09:35:10 首次发布

本文链接：https://blog.csdn.net/vanora1111/article/details/142751309

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