The React column has been updated on GIthub.

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 Learn about React route jumps in React

📢 Thank you very much for reading

The 📢 React column has been fully updated on GIthub

📢 May you be true to yourself and love life

The introduction

When we learned JavaScript, we learned a component library called Bootstrap. It allows us to develop quickly, but now we have learned React, a component-based programming method, which rarely involves Posting large amounts of HTML code with CSS and JS. We also have some component libraries ready to use, which we just need to write a component tag to call. This makes React development very fast, convenient, and clean.

What we are studying here is Ant-Design (as it should be), which has a number of components at its disposal

Buttons, calendars, these are very common components, let’s see how to use them

1. Basic use of Antd component

Using Antd components is very simple

Lead package —– exposure —- use

First we implement a simple button through the component library

The first step

Install and import the ANTD package

Use the command to download the component library

 yarn add antd
Copy the code

In the file we need to use, in this case in app.jsx

 import { Button } from 'antd'
Copy the code

Along with the introduction, expose the name of the component to be used, Button

It is recommended to go to the official documentation, there will be code explanation

Now we can use the Button component in our App

 <div>
     App..
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="dashed">Dashed Button</Button>
     <br />
     <Button type="text">Text Button</Button>
     <Button type="link">Link Button</Button>
 </div>
Copy the code

I’m using a couple of buttons here

But then you’ll notice that the buttons are missing styles

We also need to import the CSS file for ANTD

 @import '/node_modules/antd/dist/antd.less';
Copy the code

The corresponding style file can be found in the dist folder in the ANTd directory of the node_modules file

The ANTD component can be successfully introduced

2. Customize theme colors

Since the color used for these components is sapphire blue, sometimes we don’t want this color and want to use a different color scheme, which of course can be done, we need to reference some libraries and change some configuration files to achieve this

In the video, the teacher explains the implementation method in versions 3. This method requires the configuration file in React to be exposed. This operation is not returned and cannot be reclaimed once exposed. I don’t think this is a good way ~

In the latest version of ANTD, the Craco library has been introduced, and we can use CrACO to achieve custom effects

First we need to install craco

 yarn add @craco/craco
Copy the code

We also need to change the startup file in package.json

 "scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
 },
Copy the code

Change to CRACO enforcement

Next we need to create a new craco.config.js file in the root directory to configure the custom content

 const CracoLessPlugin = require('craco-less');
 ​
 module.exports = {
   plugins: [
     {
       plugin: CracoLessPlugin,
       options: {
         lessLoaderOptions: {
           lessOptions: {
             modifyVars: { '@primary-color': 'skyblue' },
             javascriptEnabled: true,
           },
         },
       },
     },
   ],
 };
Copy the code

It is used to manipulate the global color of less files

In short, the ANTD component is written in less, and we need to reconfigure it to change its value

At the same time we need to change our previous app.css file to app.less file and introduce our less file in it

 @import '/node_modules/antd/dist/antd.less';
Copy the code

Be sure to include a semicolon at the end, which is a very easy mistake to make

As you can see, we have successfully changed the theme color to red

The ANTD UI component library is a library for the antD UI component library. The antD UI component library is a library for the ANTD UI component library.

\