React 安装及使用antd组件库

React 安装及使用antd组件库

下载组件库

yarn add antd
或
npm install antd

配置

引入

在index.tsx/index.jsx中引入文件

import "antd/dist/antd.less"

此处引入less文件是为了配置组件库的主题样式

下载样式重写依赖

yarn add @craco/craco
或
npm install @craco/craco --save

yarn add craco-less
或
npm install craco-less

替换命令

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

替换为：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

配置样式

1. 根目录下创建一个文件夹craco.config.js

2. 配置相关样式

   const CracoLessPlugin = require('craco-less');
   
   module.exports = {
       plugins: [
           {
               plugin: CracoLessPlugin,
               options: {
                   lessLoaderOptions: {
                       lessOptions: {
                           modifyVars: { '@primary-color': 'rgb(0,82,204)','@font-size-base':'16px' },
                           javascriptEnabled: true,
                       },
                   },
               },
           },
       ],
   };
   

   配置主题详细

使用

引用需要的组件

import {Form} from 'antd'

运用

<Form onFinish={handleSubmit}>
    
        <Input placeholder='用户名' type="text" name="" id="username" />
    Form.Item>
    
        <Input placeholder='密码' type="password" id='password' />
    Form.Item>
    <Form.Item>
        <Button htmlType='submit' type='primary'>登录Button>
    Form.Item>

Form>