Ant Design的安装与使用。

最新推荐文章于 2024-08-05 23:30:12 发布

柠檬不萌只是酸i

最新推荐文章于 2024-08-05 23:30:12 发布

阅读量2k

点赞数 1

文章标签： antDesign的安装与使用

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/102881425

版权

本文介绍了如何在基于create-react-app的React项目中安装和使用Ant Design UI组件库。通过npm安装antd模块，然后在App.js导入按钮组件，并在App.css引入样式文件，即可实现antd的初步集成。按需引入antd的css可以参照官方高级配置文档。

摘要由CSDN通过智能技术生成

Ant Design是一个React UI 组件库，主要用于研发企业级中后台产品。

下面介绍下在 create-react-app 中使用 ant design。

假设你现在已经有一个create-react-app 搭建的react项目。基本目录如下：

我们在此基础上安装并使用 antd

npm install antd --save // 安装antd模块

(1)在App.js里面引入antd 的按钮组件。

在App.css里面引入antd的css文件。

【app.js】
// 引入antd中的button组件
import Button from 'antd/es/button';
// 引入App.css文件，在该文件里面引入antd的css
import './assets/css/App.css'


render(){
    return(
        <div>
            <Button type="primary">我是antd组件的button</Button>
        </div>
    )
}


【App.css】里面引入：
@import '~antd/dist/antd.css';

（2）得到的页面结果如下：