如何使用 Ant Design 自定義 React 主題

說好的用戶界面 (UI) 設計在吸引您的網站受眾並引導他們進行轉換方面發揮著巨大作用，這有點輕描淡寫。 雖然任何好的 UI 都需要交互式、直觀、豐富且易於訪問的設計——這似乎是一項艱鉅的挑戰——但當您使用高質量的組件和庫來構建它時，它是可以實現的。

其中最受歡迎的是 Ant 設計。 它是一個 React UI 庫，可以訪問易於使用的優質組件，用於構建優雅和快速的用戶界面。

為什麼選擇螞蟻設計？

由阿里巴巴創建的螞蟻設計系統被阿里巴巴（當然）、騰訊、百度等幾家大公司使用。

它已迅速成為最常用的 React UI 庫。 以前 Material-UI 在 Github 上最受歡迎，擁有超過 75k 的 star，但 Ant Design 現在已經以 77.5k 超越它們！

Ant design 做得如此出色的地方在於將他們的設計人性化。 他們通過衡量四個以人類意識和幸福為中心的價值觀來評估設計質量——自然、確定、有意義和成長。 這些作為設計師的標準，指導他們進行決策和更好的判斷。

Ant 設計組件

Ant design（或 antd）提供了許多豐富的 UI 組件，可以增強您的網站或應用程序體驗。 在下面查看其中一些，但有關更多選項，請訪問此處。

通用組件：按鈕、圖標、排版等。

佈局：網格、佈局、間距等。

導航：麵包屑、菜單、下拉菜單等。

數據輸入：自動完成、複選框、日期選擇器等。

數據展示：頭像、評論、可折疊面板等

安裝 React 和 Ant Design

既然我們知道了 Ant design 中有哪些組件，那麼讓我們學習一下 React 的基本安裝過程，然後在其中安裝 Ant design。

您可以使用yarn或npm來設置 React 項目。 以下是安裝和設置 React 的基本命令：

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

安裝 React 後，您可以在瀏覽器中看到正在運行的應用程序。

這是新建項目中默認生成的目錄。 展望未來，我們將在這裡修改一些文件以實現最終輸出。

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

現在在設置 React 之後，讓我們使用以下命令在其中安裝 Ant design：

 $ yarn add antd

安裝 antd 後，您可以通過修改項目中 src 文件夾內的 App.js 中的標記來使用 Ant 組件。 在這裡，我從 Ant 添加一個按鈕元素。

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

螞蟻按鈕組件：

保存並運行應用程序後，您將能夠在瀏覽器中看到藍色的 Ant 主按鈕元素（如上所示）。 這意味著 Ant 已成功集成到 React 中。

自定義主題

將 Ant Design 與 React 集成的最好之處在於，它允許您自定義設計令牌以滿足業務或品牌要求的 UI 多樣性，包括原色、邊框半徑、邊框顏色等。

圖片來源：Intoli

要允許這些自定義，您需要進行一些高級配置。

高級配置：

此時需要自定義create-react-app的默認配置。 讓我們使用CRACO （Create React App Configuration Override）——一個用於自定義配置 create-react-app 的社區解決方案。

第 1 步：您首先需要安裝 CRACO，並將 package.json 中的默認 React-script 替換為 CRACO 。

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

根據配置主題的需求，自定義主題需要使用類似於less-loader提供的Less變量覆蓋功能。 我們可以引入 Craco-less 來幫助加載更少的樣式和修改變量。

 $ yarn add craco-less

第二步：修改src/App.css文件為src/App.less ，在 app.less 中通過 antd.css 導入antd.less文件

/* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

第三步：在根目錄下創建craco.config.js ，修改默認配置。

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

這裡，less-loader 是用於主題配置的modifyVars 。

如果看到綠色按鈕，則說明配置成功。 現在，您可以使用提供的標記/變量使用您自己的一組顏色自定義主題。

Ant 設計風格變量

下面是一些最常用的泛型變量。 您可以訪問此處以獲取有關所有可用樣式變量的詳細信息。

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers