2024年4月18日发(作者：)

antd design token 用法

antd design是一个非常流行的UI组件库，它提供了一套美观、实用且易

于定制的UI组件。为了便于样式的管理和定制，antd design引入了一种

名为"token"的概念。本文将介绍antd design token的用法，从什么是

token开始，然后讨论为什么要使用token以及如何使用它们定制antd

design的样式。

一、什么是token？

在这里，token指的是一种封装了样式信息的变量。它们可以代表颜色、

字体、间距等样式相关的值。通过使用token，我们可以将这些样式值集

中管理，并在应用的任何地方使用它们。这样可以避免硬编码样式值，方

便统一修改和定制。

二、为什么要使用token？

1. 维护性强：使用token可以将样式信息集中起来，减少样式的分散和

重复。当需要修改样式时，只需在token中修改一处即可，不必在整个应

用中搜索并修改所有相关样式的地方。

2. 可定制性强：token提供了一种可扩展的方式来定制antd design的样

式。通过修改token的值，我们可以轻松地改变整个应用的外观，满足定

制化的需求。

3. 提高开发效率：使用token可以提高开发效率。它们可以作为样式的

快捷方式，使得编写样式的过程更加简洁，减少了样式命名的繁琐。

三、如何使用token？

1. 引入token：首先，我们需要在项目中引入antd的样式文件，这样才

能使用antd提供的默认token。我们可以在应用的入口文件中引入antd

的样式文件，例如：

import 'antd/dist/';

2. 查看token：antd design提供了一个很好的方式来查看所有的token。

我们可以使用`npm run theme`命令来启动antd的主题调试页面。页面

上会展示所有的token及其对应的值，我们可以通过查看页面的相关样式

来了解和修改token。

3. 自定义token：要定制antd design的样式，我们需要定义自己的token。

antd提供了`@import '~antd/lib/style/themes/';`这样的

导入语句来引入antd的默认样式。然后，我们可以开始声明自己的token。

例如，可以定义一个名为`@primary-color`的变量来修改主题的主色调：

@import '~antd/lib/style/themes/';

@primary-color: #1890ff; 修改主题的主色调为蓝色

4. 使用token：在定义了token后，可以通过使用`@{tokenName}`的形

式来引用token。例如，修改一个按钮的背景色为定义的

`@primary-color`：

.custom-button {

background: @primary-color;

}

5. 全局配置：除了在样式文件中使用token外，antd还提供了一种全局

配置的方式来使用token。我们可以在antd的配置文件中设置相应的

token值，以定制应用的样式。通过这种方式，我们可以在项目的任何地

方使用token。

通过以上步骤，我们可以灵活地使用token来定制antd design的样式，

使得整个应用的样式具有一致性和可维护性。

总结：

本文介绍了antd design token的用法。我们从token的定义开始，讨论

了为什么要使用token以及如何使用token来定制antd design的样式。

通过使用token，我们可以减少样式分散和重复，提高样式的可维护性和

可定制性，同时也提高了开发效率。希望本文能帮助读者更好地了解antd

design token的用法，并在实际开发中灵活使用它们。