从 Less 变量到 Design Token

本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。

注意：仍有部分变量没有对应的 Component Token，这些变量在 5.x 版本中已被废弃。

如何配置 Component Token

通过 ConfigProvider 的 theme 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token

import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
        Checkbox: {
          colorPrimary: '#ff4d4f',
        },
      },
    }}
  >
    <Radio>Radio</Radio>
    <Checkbox>Checkbox</Checkbox>
  </ConfigProvider>
);

export default App;

组件变量

Anchor 锚点

Less 变量	Component Token	备注
`@anchor-bg`	-	可以由 `className` 或 `style` 直接修改
`@anchor-border-color`	`colorSplit`	全局 Token
`@anchor-link-top`	`linkPaddingBlock`	-
`@anchor-link-left`	`linkPaddingInlineStart`	-
`@anchor-link-padding`	-	`${linkPaddingBlock}px ${linkPaddingInlineStart}px`

Avatar 头像

less 变量	Component Token	备注
`@avatar-size-base`	`containerSize`	-
`@avatar-size-lg`	`containerSizeLG`	-
`@avatar-size-sm`	`containerSizeSM`	-
`@avatar-font-size-base`	`textFontSize`	-
`@avatar-font-size-lg`	`textFontSizeLG`	-
`@avatar-font-size-sm`	`textFontSizeSM`	-
`@avatar-bg`	-	可由 `className` 或 `style` 直接覆盖
`@avatar-color`	`colorTextLightSolid`	全局 Token
`@avatar-border-radius`	`borderRadius`	全局 Token
`@avatar-group-overlapping`	`groupOverlapping`	-
`@avatar-group-space`	`groupSpace`	-
`@avatar-group-border-color`	`colorBorderBg`	全局 Token

Less 变量	Component Token	备注
`@breadcrumb-base-color`	`itemColor`	-
`@breadcrumb-last-item-color`	`lastItemColor`	-
`@breadcrumb-font-size`	`fontSize`	全局 Token
`@breadcrumb-icon-font-size`	`iconFontSize`	-
`@breadcrumb-link-color`	`linkColor`	-
`@breadcrumb-link-color-hover`	`linkHoverColor`	-
`@breadcrumb-separator-color`	`separatorColor`	-
`@breadcrumb-separator-margin`	`separatorMargin`	-

Calendar 日历

Less 变量	Component Token	备注
`@calendar-bg`	-	由于样式变化已废弃
`@calendar-input-bg`	-	由于样式变化已废弃
`@calendar-border-color`	-	由于样式变化已废弃
`@calendar-item-active-bg`	`itemActiveBg`	-
`@calendar-column-active-bg`	-	由于样式变化已废弃
`@calendar-full-bg`	`fullBg`	-
`@calendar-full-panel-bg`	`fullPanelBg`	-

Card 卡片

Less variables	Component Token	Note
`@card-head-color`	`colorTextHeading`	全局 Token
`@card-head-background`	`headerBg`	-
`@card-head-font-size`	`headerFontSize`	-
`@card-head-font-size-sm`	`headerFontSizeSM`	-
`@card-head-padding`	-	已废弃
`@card-head-padding-sm`	-	已废弃
`@card-head-height`	`headerHeight`	-
`@card-head-height-sm`	`headerHeightSM`	-
`@card-inner-head-padding`	-	已废弃
`@card-padding-base`	`cardPaddingBase`	-
`@card-padding-base-sm`	`cardPaddingBaseSm`	-
`@card-actions-background`	`actionsBackground`	-
`@card-actions-li-margin`	`actionsLiMargin`	-
`@card-skeleton-bg`	-	已废弃，已改为内置 Skeleton 组件
`@card-background`	`colorBgContainer`	全局 Token
`@card-shadow`	-	可由 `className` 或者 `style` 直接修改
`@card-radius`	`borderRadiusLG`	全局 Token
`@card-head-tabs-margin-bottom`	`tabsMarginBottom`	-
`@card-head-extra-color`	`extraColor`	-

Carousel 走马灯

Less 变量	Component Token	备注
`@carousel-dot-width`	`dotWidth`	-
`@carousel-dot-height`	`dotHeight`	-
`@carousel-dot-active-width`	`dotActiveWidth`	-

Checkbox 多选框

Less 变量	Component Token	备注
`@checkbox-size`	`controlInteractiveSize`	全局 Token
`@checkbox-color`	`colorPrimary`	-
`@checkbox-check-color`	`colorWhite`	-
`@checkbox-check-bg`	-	`colorPrimary`
`@checkbox-border-width`	`lineWidth`	-
`@checkbox-border-radius`	`borderRadiusSM`	-
`@checkbox-group-item-margin-right`	-	由于样式变化已废弃

Descriptions 描述列表

less 变量	Component Token	备注
`@descriptions-bg`	`labelBg`	-
`@descriptions-title-margin-bottom`	`titleMarginBottom`	-
`@descriptions-default-padding`	`padding`、`paddingLG`	全局 Token，对应值为 `${token.padding}px ${token.paddingLG}px`
`@descriptions-middle-padding`	`paddingSM`、`paddingLG`	全局 Token，对应值为 `${token.paddingSM}px ${token.paddingLG}px`
`@descriptions-small-padding`	`paddingXS`、`padding`	全局 Token，对应值为 `${token.paddingXS}px ${token.padding}px`
`@descriptions-item-padding-bottom`	`itemPaddingBottom`	-
`@descriptions-item-trailing-colon`	-	由于样式变化已废弃
`@descriptions-item-label-colon-margin-right`	`colonMarginRight`	-
`@descriptions-item-label-colon-margin-left`	`colonMarginLeft`	-
`@descriptions-extra-color`	`extraColor`	-

Drawer 抽屉

Less 变量	Component Token	备注
`@drawer-bg`	`colorBgElevated`	全局 Token
`@drawer-header-padding`	`padding`、`paddingLG`	全局 Token，对应值为 `${padding}px ${paddingLG}px`
`@drawer-title-font-size`	`fontSizeLG`	全局 Token
`@drawer-title-line-height`	`lineHeightLG`	全局 Token
`@drawer-body-padding`	`paddingLG`	全局 Token
`@drawer-footer-padding-vertical`	`footerPaddingBlock`	`footerPaddingBlock` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位
`@drawer-footer-padding-horizontal`	`footerPaddingInline`	`footerPaddingInline` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位

Less 变量	Component Token	备注
`@dropdown-selected-color`	`colorPrimary`	-
`@dropdown-menu-submenu-disabled-bg`	`colorBgElevated`	全局 Token
`@dropdown-selected-bg`	`controlItemBgActive`	全局 Token

Empty 空状态

Less 变量	Component Token	备注
`@empty-font-size`	`fontSize`	全局 Token

Image 图片

less 变量	Component Token	备注
`@image-size-base`	-	未使用已废弃
`@image-font-size-base`	-	未使用已废弃
`@image-bg`	`colorFillTertiary`	全局 Token
`@image-color`	`colorTextLightSolid`	全局 Token
`@image-preview-operation-size`	`previewOperationSize`	-
`@image-preview-operation-color`	`previewOperationColor`	-
`@image-preview-operation-disabled-color`	`previewOperationColorDisabled`	-

List 列表

less 变量	Component Token	备注
`@list-header-background`	`headerBg`	-
`@list-footer-background`	`footerBg`	-
`@list-empty-text-padding`	`emptyTextPadding`	-
`@list-item-padding`	`itemPadding`	-
`@list-item-padding-sm`	`itemPaddingSM`	-
`@list-item-padding-lg`	`itemPaddingLG`	-
`@list-item-meta-margin-bottom`	`metaMarginBottom`	-
`@list-item-meta-avatar-margin-right`	`avatarMarginRight`	-
`@list-item-meta-title-margin-bottom`	`titleMarginBottom`	-
`@list-customize-card-bg`	-	由于样式变化已废弃
`@list-item-meta-description-font-size`	`descriptionFontSize`	-

Mentions 提及

less 变量	Component Token	备注
`@mentions-dropdown-bg`	`colorBgElevated`	-
`@mentions-dropdown-menu-item-hover-bg`	-	已废弃

Less 变量	Component Token	备注
`@menu-inline-toplevel-item-height`	`itemHeight`	同 `@menu-item-height`
`@menu-item-height`	`itemHeight`	-
`@menu-item-group-height`	`groupTitleLineHeight`	-
`@menu-collapsed-width`	`collapsedWidth`	-
`@menu-bg`	`itemBg`	-
`@menu-popup-bg`	`popupBg`	-
`@menu-item-color`	`itemColor`	-
`@menu-inline-submenu-bg`	`subMenuItemBg`	-
`@menu-highlight-color`	`itemSelectedColor`	-
`@menu-highlight-danger-color`	`dangerItemSelectedColor`	-
`@menu-item-active-bg`	`itemActiveBg`	-
`@menu-item-active-danger-bg`	`dangerItemActiveBg`	-
`@menu-item-active-border-width`	`activeBarBorderWidth`	-
`@menu-item-group-title-color`	`groupTitleColor`	-
`@menu-item-vertical-margin`	`itemMarginBlock`	-
`@menu-item-font-size`	`fontSize`	全局 Token
`@menu-item-boundary-margin`	-	因样式调整已废弃，可使用 `itemMarginBlock` 替代
`@menu-item-padding-horizontal`	`itemPaddingInline`	-
`@menu-item-padding`	-	已废弃，使用 `itemPaddingInline` 和 `itemHeight` 替代
`@menu-horizontal-line-height`	`horizontalLineHeight`	-
`@menu-icon-margin-right`	`iconMarginInlineEnd`	-
`@menu-icon-size`	`iconSize`	-
`@menu-icon-size-lg`	`horizontalLineHeight`	-
`@menu-dark-color`	`darkItemColor`	-
`@menu-dark-danger-color`	`darkDangerItemColor`	-
`@menu-dark-bg`	`darkItemBg`	-
`@menu-dark-arrow-color`	-	已废弃，和文字颜色相同
`@menu-dark-inline-submenu-bg`	`darkSubMenuItemBg`	-
`@menu-dark-highlight-color`	`darkItemSelectedColor`	-
`@menu-dark-item-active-bg`	`darkItemSelectedBg`	-
`@menu-dark-item-active-danger-bg`	`darkDangerItemSelectedBg`	-
`@menu-dark-selected-item-icon-color`	-	已废弃，同 `darkItemSelectedColor`
`@menu-dark-selected-item-text-color`	-	已废弃，同 `darkItemSelectedColor`
`@menu-dark-item-hover-bg`	`darkItemHoverBg`	-

Message 全局提示

Less 变量	Component Token	备注
`@zindex-message`	`zIndexPopup`	-
`@message-notice-content-padding`	`contentPadding`	-
`@message-notice-content-bg`	`contentBg`	-

Less 变量	Component Token	备注
`@modal-header-padding-vertical`	-	由于样式变化已废弃
`@modal-header-padding-horizontal`	-	由于样式变化已废弃
`@modal-body-padding`	-	由于样式变化已废弃
`@modal-header-bg`	`headerBg`	-
`@modal-header-padding`	-	由于样式变化已废弃
`@modal-header-border-width`	-	由于样式变化已废弃
`@modal-header-border-style`	-	由于样式变化已废弃
`@modal-header-title-line-height`	`titleLineHeight`	-
`@modal-header-title-font-size`	`titleFontSize`	-
`@modal-header-border-color-split`	-	由于样式变化已废弃
`@modal-header-close-size`	-	由于样式变化已废弃
`@modal-content-bg`	`contentBg`	-
`@modal-heading-color`	`titleColor`	-
`@modal-close-color`	`colorIcon`	全局 Token
`@modal-footer-bg`	`footerBg`	-
`@modal-footer-border-color-split`	-	由于样式变化已废弃
`@modal-footer-border-style`	-	由于样式变化已废弃
`@modal-footer-padding-vertical`	-	由于样式变化已废弃
`@modal-footer-padding-horizontal`	-	由于样式变化已废弃
`@modal-footer-border-width`	-	由于样式变化已废弃
`@modal-mask-bg`	`colorBgMask`	全局 Token
`@modal-confirm-body-padding`	-	由于样式变化已废弃
`@modal-confirm-title-font-size`	`titleFontSize`	-
`@modal-border-radius`	`borderRadiusLG`	全局 Token

Pagination 分页

Less 变量	Component Token	备注
`@pagination-item-bg`	`itemBg`	-
`@pagination-item-size`	`itemSize`	-
`@pagination-item-size-sm`	`itemSizeSM`	-
`@pagination-font-family`	`fontFamily`	全局 Token
`@pagination-font-weight-active`	`fontWeightStrong`	全局 Token
`@pagination-item-bg-active`	`itemActiveBg`	-
`@pagination-item-link-bg`	`itemLinkBg`	-
`@pagination-item-disabled-color-active`	`itemActiveColorDisabled`	-
`@pagination-item-disabled-bg-active`	`itemActiveBgDisabled`	-
`@pagination-item-input-bg`	`itemInputBg`	-
`@pagination-mini-options-size-changer-top`	`miniOptionsSizeChangerTop`	-

Less variables	Component Token	Note
`@popover-bg`	`colorBgElevated`	-
`@popover-color`	`colorText`	全局 Token
`@popover-min-width`	`minWidth`	-
`@popover-min-height`	-	已废弃
`@popover-arrow-width`	`sizePopupArrow`	全局 Token
`@popover-arrow-color`	-	已废弃
`@popover-arrow-outer-color`	-	已废弃
`@popover-distance`	`marginXXS`	全局 Token
`@popover-padding-horizontal`	-	已废弃

Radio 单选框

less 变量	Component Token	备注
`@radio-size`	`radioSize`	-
`@radio-top`	-	已废弃
`@radio-border-width`	`lineWidth`	全局 Token
`@radio-dot-size`	`dotSize`	-
`@radio-dot-color`	-	已废弃
`@radio-dot-disabled-color`	`dotColorDisabled`	-
`@radio-solid-checked-color`	`buttonSolidCheckedColor`	-
`@radio-button-bg`	`buttonBg`	-
`@radio-button-checked-bg`	`buttonCheckedBg`	-
`@radio-button-color`	`buttonColor`	-
`@radio-button-hover-color`	`colorPrimaryHover`	全局 Token
`@radio-button-active-color`	`colorPrimaryActive`	全局 Token
`@radio-button-padding-horizontal`	`buttonPaddingInline`	-
`@radio-disabled-button-checked-bg`	`buttonCheckdBgDisabled`	-
`@radio-disabled-button-checked-color`	`buttonCheckdColorDisabled`	-
`@radio-wrapper-margin-right`	`wrapperMarginInlineEnd`	-

Rate 评分

less 变量	Component Token	备注
`@rate-star-color`	`starColor`	-
`@rate-star-bg`	`starBg`	-
`@rate-star-size`	`starSize`	-
`@rate-star-hover-scale`	`starHoverScale`	-

Result 结果

Less 变量	Component Token	备注
`@result-title-font-size`	`titleFontSize`	-
`@result-subtitle-font-size`	`subtitleFontSize`	-
`@result-extra-margin`	`extraMargin`	-

Segment

Less 变量	Component Token	备注
`@segmented-container-padding`	`padding`	-
`@segmented-label-color`	`itemColor`	-
`@segmented-bg`	-	可以用 `className` 或 `style` 自定义
`@segmented-hover-bg`	`itemHoverBg`	-
`@segmented-label-hover-color`	`itemHoverColor`	-
`@segmented-selected-bg`	`itemSelectedBg`	-

Skeleton 骨架屏

Less 变量	Component Token	备注
`@skeleton-block-radius`	`blockRadius`	-
`@skeleton-title-height`	`titleHeight`	-
`@skeleton-color`	`gradientFromColor`	-
`@skeleton-to-color`	`gradientToColor`	-
`@skeleton-paragraph-margin-top`	`paragraphMarginTop`	-
`@skeleton-paragraph-li-height`	`paragraphLiHeight`	-
`@skeleton-paragraph-li-margin-top`	-	由于样式变化已废弃

Slider 滑动输入条

Less 变量	Component Token	备注
`@slider-margin`	-	可由 `className` 或 `style` 直接修改
`@slider-rail-background-color`	`railBg`	-
`@slider-rail-background-color-hover`	`railHoverBg`	-
`@slider-track-background-color`	`trackBg`	-
`@slider-track-background-color-hover`	`trackHoverBg`	-
`@slider-handle-border-width`	`handleLineWidth`	-
`@slider-handle-background-color`	-	已废弃
`@slider-handle-color`	`handleColor`	-
`@slider-handle-color-hover`	`handleActiveColor`	-
`@slider-handle-color-focus`	`handleActiveColor`	-
`@slider-handle-color-focus-shadow`	-	已废弃
`@slider-handle-color-tooltip-open`	`handleActiveColor`	-
`@slider-handle-size`	`handleSize`	-
`@slider-handle-margin-top`	-	已废弃
`@slider-handle-margin-left`	-	已废弃
`@slider-handle-shadow`	-	已废弃
`@slider-dot-border-color`	`dotBorderColor`	-
`@slider-dot-border-color-active`	`dotActiveBorderColor`	-
`@slider-disabled-color`	`trackBgDisabled`	-
`@slider-disabled-background-color`	-	已废弃

Statistic 统计数值

Less 变量	Component Token	备注
`@statistic-title-font-size`	`titleFontSize`	-
`@statistic-content-font-size`	`contentFontSize`	-
`@statistic-font-family`	`fontFamily`	全局 Token

Step 步骤条

Less 变量	Component Token	备注
`@process-tail-color`	`colorSplit`	全局 Token
`@steps-nav-arrow-color`	`navArrowColor`	-
`@steps-background`	`colorBgContainer`	-
`@steps-icon-size`	`iconSize`	-
`@steps-icon-custom-size`	`customIconSize`	-
`@steps-icon-custom-top`	`customIconTop`	-
`@steps-icon-custom-font-size`	`customIconFontSize`	-
`@steps-icon-top`	`iconTop`	-
`@steps-icon-font-size`	`iconFontSize`	-
`@steps-icon-margin`	-	已废弃
`@steps-title-line-height`	`titleLineHeight`	-
`@steps-small-icon-size`	`iconSizeSM`	-
`@steps-small-icon-margin`	-	已废弃
`@steps-dot-size`	`dotSize`	-
`@steps-dot-top`	-	已废弃
`@steps-current-dot-size`	`dotCurrentSize`	-
`@steps-description-max-width`	`descriptionMaxWidth`	-
`@steps-nav-content-max-width`	`stepsNavContentMaxWidth`	-
`@steps-vertical-icon-width`	`iconSize`	-
`@steps-vertical-tail-width`	-	已废弃
`@steps-vertical-tail-width-sm`	-	已废弃

Tabs 标签页

Less 变量	Component Token	备注
`@tabs-card-head-background`	`cardBg`	-
`@tabs-card-height`	`cardHeight`	-
`@tabs-card-active-color`	`itemSelectedColor`	-
`@tabs-card-horizontal-padding`	`cardPadding`	-
`@tabs-card-horizontal-padding-sm`	`cardPaddingSM`	-
`@tabs-card-horizontal-padding-lg`	`cardPaddingLG`	-
`@tabs-title-font-size`	`titleFontSize`	-
`@tabs-title-font-size-lg`	`titleFontSizeLG`	-
`@tabs-title-font-size-sm`	`titleFontSizeSM`	-
`@tabs-ink-bar-color`	`inkBarColor`	-
`@tabs-bar-margin`	`horizontalMargin`	-
`@tabs-horizontal-gutter`	`horizontalItemGutter`	-
`@tabs-horizontal-margin`	`horizontalItemMargin`	-
`@tabs-horizontal-margin-rtl`	`horizontalItemMarginRTL`	-
`@tabs-horizontal-padding`	`horizontalItemPadding`	-
`@tabs-horizontal-padding-lg`	`horizontalItemPaddingLG`	-
`@tabs-horizontal-padding-sm`	`horizontalItemPaddingSM`	-
`@tabs-vertical-padding`	`verticalItemPadding`	-
`@tabs-vertical-margin`	`verticalItemMargin`	-
`@tabs-scrolling-size`	-	已废弃
`@tabs-highlight-color`	`itemSelectedColor`	-
`@tabs-hover-color`	`itemHoverColor`	-
`@tabs-active-color`	`itemActiveColor`	-
`@tabs-card-gutter`	`cardGutter`	-
`@tabs-card-tab-active-border-top`	-	已废弃

Tag 标签

less 变量	Component Token	备注
`@tag-border-radius`	`borderRadiusSM`	全局 Token
`@tag-default-bg`	`defaultBg`	-
`@tag-default-color`	`defaultColor`	-
`@tag-font-size`	`fontSizeSM`	全局 Token
`@tag-line-height`	`lineHeightSM`	全局 Token

Timeline 时间轴

Less 变量	Component Token	备注
`@timeline-width`	`tailWidth`	`tailWidth` 为数字，不带单位，`@timeline-width` 带单位
`@timeline-color`	`tailColor`	-
`@timeline-dot-border-width`	`dotBorderWidth`	-
`@timeline-dot-color`	-	已废弃
`@timeline-dot-bg`	`dotBg`	-
`@timeline-item-padding-bottom`	`itemPaddingBottom`	-

less 变量	Component Token	备注
`@tooltip-max-width`	-	可由 `className` 或 `style` 直接修改
`@tooltip-color`	`colorTextLightSolid`	全局 Token
`@tooltip-bg`	`colorBgSpotlight`	全局 token
`@tooltip-arrow-width`	`sizePopupArrow`	全局 Token
`@tooltip-distance`	`marginXXS`	全局 Token
`@tooltip-arrow-color`	-	同 `@tooltip-bg`，已废弃
`@tooltip-border-radius`	`borderRadius`	全局 Token

Transfer 穿梭框

Less variables	Component Token	Note
`@transfer-header-height`	`headerHeight`	-
`@transfer-item-height`	`itemHeight`	-
`@transfer-disabled-bg`	`colorBgContainerDisabled`	全局 Token
`@transfer-list-height`	`listHeight`	-
`@transfer-item-hover-bg`	`controlItemBgHover`	全局 Token
`@transfer-item-selected-hover-bg`	`controlItemBgActiveHover`	全局 Token
`@transfer-item-padding-vertical`	`itemPaddingBlock`	-
`@transfer-list-search-icon-top`	-	已废弃

Typography 排版

less 变量	Component Token	备注
`@typography-title-font-weight`	`fontWeightStrong`	全局 Token
`@typography-title-margin-top`	`titleMarginTop`	-
`@typography-title-margin-bottom`	`titleMarginBottom`	-

Upload 上传

less 变量	Component Token	备注
`@upload-actions-color`	`actionsColor`	-

从 Less 变量到 Design Token

从 Less 变量到 Design Token

如何配置 Component Token

组件变量

Anchor 锚点

Avatar 头像

BreadCrumb 面包屑

Calendar 日历

Card 卡片

Carousel 走马灯

Checkbox 多选框

Descriptions 描述列表

Drawer 抽屉

Dropdown 下拉菜单

Empty 空状态

Image 图片

List 列表

Menu 导航菜单

Message 全局提示

Modal 对话框

Pagination 分页

Popover 气泡卡片

Radio 单选框

Rate 评分

Result 结果

Segment

Skeleton 骨架屏

Slider 滑动输入条

Statistic 统计数值

Step 步骤条

Tabs 标签页

Tag 标签

Timeline 时间轴

Tooltip 文字提示

Typography 排版

Upload 上传

如何配置 Component Token

组件变量

Anchor 锚点

Avatar 头像

BreadCrumb 面包屑

Calendar 日历

Card 卡片

Carousel 走马灯

Checkbox 多选框

Descriptions 描述列表

Drawer 抽屉

Dropdown 下拉菜单

Empty 空状态

Image 图片

List 列表

Menu 导航菜单

Message 全局提示

Modal 对话框

Pagination 分页

Popover 气泡卡片

Radio 单选框

Rate 评分

Result 结果

Segment

Skeleton 骨架屏

Slider 滑动输入条

Statistic 统计数值

Step 步骤条

Tabs 标签页

Tag 标签

Timeline 时间轴

Tooltip 文字提示

Typography 排版

Upload 上传