如何使用 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