React 安装及使用antd组件库

最新推荐文章于 2024-05-16 06:33:37 发布

TA_WORLD

最新推荐文章于 2024-05-16 06:33:37 发布

阅读量1.1k

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_56303170/article/details/125121518

版权

React 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在React项目中安装和配置Ant Design组件库，包括使用`yarn`或`npm`下载库，引入并配置less文件，以及通过Craco重写样式。此外，还展示了如何设置`craco.config.js`来调整主题，并提供了使用Form组件的示例。

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

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"
  },

配置样式

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

配置相关样式

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>