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}>
    <Form.Item name={username} rules={[{required:true,message:请输入用户名}]}>
        <Input placeholder=用户名 type="text" name="" id="username" />
    </Form.Item>
    <Form.Item name={password} rules={[{required:true,message:请输入密码}]}>
        <Input placeholder=密码 type="password" id=password />
    </Form.Item>
    <Form.Item>
        <Button htmlType=submit type=primary>登录</Button>
    </Form.Item>

</Form>