React安装ant design组件库，并使用

浅浅的花香味﹌ 2023-10-14 13:44 48阅读 0赞

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design]

但是如何在React里面用起来，好像并不是很顺畅，没有像Vue里面那么友好，因为我踩过这个坑，虽然安装很简单，但是想要出样式，还是有点步骤的。

## 安装Antd ##

npm命令：

npm install antd --save

yarn命令：

yarn add antd

pnpm命令：

pnpm install antd --save

## 在React中使用 ##

千万不要简单的只看官方的文档，是有问题的，因为里面没有引入css样式，这会导致你即便拷贝了组件代码，但是没有样式

import { Button } from 'antd';
    import React from 'react';
    
    const App: React.FC = () => (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
    
    export default App;

### 接着要引入样式 ###

在跟文件index.js文件里加上：这个要看antd的安装内容里面是不是这个，然后再导入![5a7a0c712c534c1f956f3d91cbabd438.png][]

我用的这种导入方式

import 'antd/dist/reset.css';

或是在App.css里加上：这个导入我方式我这里报错，所以不推荐

@import '~antd/dist/antd.css';

## 使用效果 ##

让你以上都是安装好之后，就会有效果了![04e757ef50e3485a88faf2f73643f9d5.png][]

[- Ant Design]: https://ant.design/docs/react/getting-started-cn
[5a7a0c712c534c1f956f3d91cbabd438.png]: https://img-blog.csdnimg.cn/5a7a0c712c534c1f956f3d91cbabd438.png
[04e757ef50e3485a88faf2f73643f9d5.png]: https://img-blog.csdnimg.cn/04e757ef50e3485a88faf2f73643f9d5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 react ant-design安装方法

. node.js 下载10.版本的在官网 node -V （一般现在是无需配置直接装就可以是全局安装了，如果不行的话就需要百度一下系统环境配置） 2. 安装no...

刺骨的言语ヽ痛彻心扉/ 2024年04月18日 10:26/ 0 赞/ 59 阅读

相关 React安装ant design组件库，并使用

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design] 但是如何在React里面用起来，好像并不是很顺畅，没有像

浅浅的花香味﹌/ 2023年10月14日 13:44/ 0 赞/ 49 阅读

相关 React Suite 组件库

React Suite 是一套 React 组件库，为后台产品而生，支持 Typescript，支持 RTL，支持服务端渲染 ![watermark_type_ZmFuZ3p

心已赠人/ 2023年02月11日 04:53/ 0 赞/ 11 阅读

相关 react 中ant design的使用

1.antd官网 https://ant.design/docs/react/introduce-cn 2、React中全局样式使用Antd 1)、安装ant

「爱情、让人受尽委屈。」/ 2023年01月02日 06:25/ 0 赞/ 248 阅读

相关 react使用antd(ant design)锚点并悬浮

import React from 'react' import { Anchor } from 'antd'; import { Layout }

红太狼/ 2022年12月04日 01:25/ 0 赞/ 112 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

川长思鸟来/ 2022年08月29日 10:24/ 0 赞/ 325 阅读

相关 React--ant design

Reactjs入门参考路径：[http://www.cnblogs.com/Leo\_wl/p/4489197.html][http_www.cnblogs.com_Leo_w

分手后的思念是犯贱/ 2022年07月13日 05:41/ 0 赞/ 227 阅读

相关模块开发之ant(Ant Design of React)使用（四）

模块开发之antd(Ant Design of React)使用（四）模块开发之antd(Ant Design of React)使用（四）前言

深碍√TFBOYSˉ_/ 2022年05月22日 07:55/ 0 赞/ 316 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

骑猪看日落/ 2022年01月26日 09:11/ 0 赞/ 309 阅读

相关 ant design vue Ui组件库按列排序前端实现

在ant design vue 组件库中，表格对某一列数据进行排序，通过指定列的sorter函数即可启动排序按钮; sorter: function(rowA,rowB)\{

叁歲伎倆/ 2021年07月24日 19:33/ 0 赞/ 451 阅读