React UI组件库Ant Design的安装、使用及按需导入

川长思鸟来 2023-02-16 15:26 17阅读 0赞

**Ant Design**简称Antd 是基于Ant Design设计体系的React UI组件库 主要用于研发企业级中后台产品

## 安装 ##

npm install antd -S

## 使用 ##

#### 导入组件： ####

import {
         DatePicker } from 'antd';

#### 全局导入样式： ####

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

然后在组件中直接用标签形式引用即可：`<DatePicker></DatePicker>`

import React from 'react';
    
    // Ant Design的日期选择组件
    import {
         DatePicker } from 'antd'
    
    export default class App extends React.Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
        }
        }
        render() {
         
            return <div>
                    <DatePicker></DatePicker>
              </div>
        }
    }

## 按需导入 ##

全局导入css样式会导致体积过大  
建议使用按需导入 减少bundle.js的体积

首先需要安装**babel-plugin-import**插件

npm i babel-plugin-import -D

在.babelrc的plugin里添加`["import",{"libraryName":"antd","style":"css"}]`

例如：

{
        
        "presets":["@babel/preset-env","@babel/preset-react"],
        "plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties",["import",{
        "libraryName":"antd","style":"css"}]]
    }

这样 每次使用的时候只需要引入模块即可 无需单独引入样式了

import {
         DatePicker } from 'antd';

--------------------

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 React组件_Ant Design

Ant Design of React `antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ![water

拼搏现实的明天。/ 2023年06月11日 15:21/ 0 赞/ 34 阅读

相关 React组件库Ant Design的安装与使用

一、什么是 Ant Design 1、[Ant Design][] 提炼自企业级中后台产品的交互语言和视觉风格 2、Ant Design 使用 TypeScript 构

野性酷女/ 2023年06月02日 09:16/ 0 赞/ 62 阅读

相关 React UI组件库Ant Design的安装、使用及按需导入

Ant Design简称Antd 是基于Ant Design设计体系的React UI组件库主要用于研发企业级中后台产品安装 npm install ant

川长思鸟来/ 2023年02月16日 15:26/ 0 赞/ 18 阅读

相关 Ant Design of React的安装、按需加载

[官方文档][Link 1] 戳这里 Ant Design 是ui组件库，具体简介看官网。 antd需要在React项目内安装，意思就是需要先创建好项目，可以戳[查看如何

蔚落/ 2022年11月06日 09:57/ 0 赞/ 561 阅读

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

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

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

相关 create-react-app中按需引入Ant-Design

先来回顾一下create-react-app脚手架创建项目的方法 //安装create-react-app脚手架 npm i create-react-app

Myth丶恋晨/ 2022年04月02日 17:40/ 0 赞/ 458 阅读

相关 vue-cli3.0安装element-ui组件及按需引入element-ui组件

[在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）][VUE-CLI 3_Element-ui] 上面这个链接是vue-cli3.0安装element-ui

浅浅的花香味﹌/ 2022年03月29日 14:10/ 0 赞/ 1060 阅读

相关按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com] > 2、后续如果有修改的话，可能忘记更新到

港控/mmm°/ 2021年12月14日 20:57/ 0 赞/ 929 阅读

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

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

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