React 入門學習（十三）-- antd 元件庫的基本使用

大家好，我是小丞同學，一名大二的前端愛好者

這篇文章是學習 React 中 React antd元件庫的學習筆記

非常感謝你的閱讀，不對的地方歡迎指正

願你忠于自己，熱愛生活

引言

在我們學習JavaScript 的時候，我們學習了一個 bootstrap 的元件庫。可以讓我們快速開發，但是我們現在學習了 React ，一種元件化程式設計方式，很少說會去貼大量的 HTML 代碼，再配一下 CSS，JS。我們也有一些現成的元件庫可以使用，我們隻需要寫一個元件标簽即可調用。這讓我們 React 開發變得十分的快速，友善和整潔。

我們這裡學習的是 Ant-design （應該是這樣），它有很多的元件供我們使用

按鈕，月曆，這些都是非常常用的元件，我們一起看看如何使用吧

1. Antd 元件基本使用

使用 Antd 元件非常的簡單

引包 ----- 暴露 ---- 使用

首先我們通過元件庫來實作一個簡單的按鈕

第一步

安裝并引入 antd 包

使用指令下載下傳這個元件庫

yarn add antd      

在我們需要使用的檔案下引入，我這裡是在 App.jsx 内引入

import { Button } from 'antd'      

在引入的同時，暴露出要使用的元件名 Button

推薦去官方文檔檢視，都會有代碼解釋

現在我們可以在 App 中使用 Button 元件

<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>      

我這裡使用了幾種按鈕

但是就這樣你會發現按鈕少了樣式

我們還需要引入 antd 的 CSS 檔案

@import '/node_modules/antd/dist/antd.less';      

可以在 node_modules 檔案中的 antd 目錄下的 dist 檔案夾中找到相應的樣式檔案，引入即可

即可成功引入 antd 元件

2. 自定義主題顔色

由于這些元件采用的顔色，都是支付寶藍，有時候我們不想要這樣的顔色，想要用其他的配色，這當然是可以實作的，我們需要引用一些庫和更改一些配置檔案來實作

在視訊中，老師講解的是 3.幾 版本中的實作方法，這種方法需要去暴露 React 中的配置檔案，這種操作是不可傳回的，一旦暴露就不可回收。我覺得這不是一個好方法~

在 antd 最新版中，引入了 craco 庫，我們可以使用 craco 來實作自定義的效果

首先我們需要安裝 craco

yarn add @craco/craco      

同時我們需要更改 package.json 中的啟動檔案

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

更改成 craco 執行

接下來我們需要在根目錄下建立一個 craco.config.js 檔案，用于配置自定義内容

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': 'skyblue' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};      

其實它就是用來操作 less 檔案的全局顔色

簡單的說，antd 元件是采用 less 編寫的，我們需要通過重新配置的方式去更改它的值

同時我們需要将我們先前的 App.css 檔案更改為 App.less 檔案，在當中引入我們的 less 檔案

@import '/node_modules/antd/dist/antd.less';      

注意一定要添加分号結尾，這是一個非常容易犯的錯誤

可見，我們成功的将主題色修改成了紅色