logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design of React
  • 更新日志
    v5.25.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ

从 Less 变量到 Design Token

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

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

注意

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

如何配置 Component Token

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

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

组件变量

Alert 警告提示

Less 变量Component Token备注
@alert-success-border-colorcolorSuccessBorder全局 token
@alert-success-bg-colorcolorSuccessBg全局 token
@alert-success-icon-colorcolorSuccess全局 token
@alert-info-border-colorcolorInfoBorder全局 token
@alert-info-bg-colorcolorInfoBg全局 token
@alert-info-icon-colorcolorInfo全局 token
@alert-warning-border-colorcolorWarningBorder全局 token
@alert-warning-bg-colorcolorWarningBg全局 token
@alert-warning-icon-colorcolorWarning全局 token
@alert-error-border-colorcolorErrorBorder全局 token
@alert-error-bg-colorcolorErrorBg全局 token
@alert-error-icon-colorcolorError全局 token
@alert-message-colorcolorTextHeading全局 token
@alert-text-colorcolorText全局 Token
@alert-close-colorcolorIcon全局 token
@alert-close-hover-colorcolorIconHover全局 token
@alert-padding-verticaldefaultPadding统一控制
@alert-padding-horizontaldefaultPadding统一控制
@alert-no-icon-padding-vertical-已废弃
@alert-with-description-no-icon-padding-verticalwithDescriptionPadding统一控制
@alert-with-description-padding-verticalwithDescriptionPadding统一控制
@alert-with-description-paddingwithDescriptionPadding统一控制
@alert-icon-top-已废弃
@alert-with-description-icon-sizewithDescriptionIconSize-

Anchor 锚点

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

Avatar 头像

less 变量Component Token备注
@avatar-size-basecontainerSize-
@avatar-size-lgcontainerSizeLG-
@avatar-size-smcontainerSizeSM-
@avatar-font-size-basetextFontSize-
@avatar-font-size-lgtextFontSizeLG-
@avatar-font-size-smtextFontSizeSM-
@avatar-bg-可由 className 或 style 直接覆盖
@avatar-colorcolorTextLightSolid全局 Token
@avatar-border-radiusborderRadius全局 Token
@avatar-group-overlappinggroupOverlapping-
@avatar-group-spacegroupSpace-
@avatar-group-border-colorcolorBorderBg全局 Token

Badge 徽标数

less 变量Component Token备注
@zindex-badgeindicatorZIndex-
@badge-heightindicatorHeight-
@badge-height-smindicatorHeightSM-
@badge-dot-sizedotSize-
@badge-font-sizetextFontSize-
@badge-font-size-smtextFontSizeSM-
@badge-font-weighttextFontWeight-
@badge-status-sizestatusSize-
@badge-text-colorcolorBgContainer全局 Token
@badge-colorcolorError全局 Token

BreadCrumb 面包屑

Less 变量Component Token备注
@breadcrumb-base-coloritemColor-
@breadcrumb-last-item-colorlastItemColor-
@breadcrumb-font-sizefontSize全局 Token
@breadcrumb-icon-font-sizeiconFontSize-
@breadcrumb-link-colorlinkColor-
@breadcrumb-link-color-hoverlinkHoverColor-
@breadcrumb-separator-colorseparatorColor-
@breadcrumb-separator-marginseparatorMargin-

Button 按钮

Less 变量Component Token备注
@btn-font-weightfontWeight-
@btn-border-radius-baseborderRadius全局 Token
@btn-border-radius-smborderRadisuSM全局 Token
@btn-border-widthlineWidth全局 Token
@btn-border-stylelineStyle全局 Token
@btn-shadowdefaultShadow-
@btn-primary-shadowprimaryShadow-
@btn-text-shadow-已废弃,v5 中不再有 text-shadow
@btn-primary-colorprimaryColor-
@btn-primary-bgcolorPrimary全局 Token
@btn-default-colordefaultColor-
@btn-default-bgdefaultBg-
@btn-default-borderdefaultBorderColor-
@btn-danger-colordangerColor-
@btn-danger-bgcolorError全局 Token
@btn-danger-bordercolorError全局 Token
@btn-disable-colorcolorTextDisabled全局 Token
@btn-disable-bgcolorBgContainerDisabled全局 Token
@btn-disable-borderborderColorDisabled-
@btn-default-ghost-colordefaultGhostColor-
@btn-default-ghost-bgghostBg-
@btn-default-ghost-borderdefaultGhostBorderColor-
@btn-font-size-lgfontSizeLG全局 Token
@btn-font-size-smfontSizeSM全局 Token
@btn-padding-horizontal-basepaddingInline-
@btn-padding-horizontal-lgpaddingInlineLG-
@btn-padding-horizontal-smpaddingInlineSM-
@btn-height-basecontrolHeight全局 Token
@btn-height-lgcontrolHeightLG全局 Token
@btn-height-smcontrolHeightSM全局 Token
@btn-line-heightlineHeight全局 Token
@btn-circle-sizecontrolHeight全局 Token
@btn-circle-size-lgcontrolHeightLG全局 Token
@btn-circle-size-smcontrolHeightSM全局 Token
@btn-square-sizecontrolHeight全局 Token
@btn-square-size-lgcontrolHeightLG全局 Token
@btn-square-size-smcontrolHeightSM全局 Token
@btn-square-only-icon-sizeonlyIconSize-
@btn-square-only-icon-size-smonlyIconSizeSM-
@btn-square-only-icon-size-lgonlyIconSizeLG-
@btn-group-bordergroupBorderColor-
@btn-link-hover-bglinkHoverBg-
@btn-text-hover-bgtextHoverBg-

Calendar 日历

Less 变量Component Token备注
@calendar-bg-由于样式变化已废弃
@calendar-input-bg-由于样式变化已废弃
@calendar-border-color-由于样式变化已废弃
@calendar-item-active-bgitemActiveBg-
@calendar-column-active-bg-由于样式变化已废弃
@calendar-full-bgfullBg-
@calendar-full-panel-bgfullPanelBg-

Card 卡片

Less variablesComponent TokenNote
@card-head-colorcolorTextHeading全局 Token
@card-head-backgroundheaderBg-
@card-head-font-sizeheaderFontSize-
@card-head-font-size-smheaderFontSizeSM-
@card-head-padding-已废弃
@card-head-padding-sm-已废弃
@card-head-heightheaderHeight-
@card-head-height-smheaderHeightSM-
@card-inner-head-padding-已废弃
@card-padding-basecardPaddingBase-
@card-padding-base-smcardPaddingBaseSm-
@card-actions-backgroundactionsBackground-
@card-actions-li-marginactionsLiMargin-
@card-skeleton-bg-已废弃,已改为内置 Skeleton 组件
@card-backgroundcolorBgContainer全局 Token
@card-shadow-可由 className 或者 style 直接修改
@card-radiusborderRadiusLG全局 Token
@card-head-tabs-margin-bottomtabsMarginBottom-
@card-head-extra-colorextraColor-

Carousel 走马灯

Less 变量Component Token备注
@carousel-dot-widthdotWidth-
@carousel-dot-heightdotHeight-
@carousel-dot-active-widthdotActiveWidth-

Cascader 级联选择

Less 变量Component Token备注
@cascader-bg-已废弃
@cascader-item-selected-bgoptionSelectedBg-
@cascader-menu-bg-已废弃
@cascader-menu-border-color-splitcolorSplit全局 Token
@cascader-dropdown-vertical-paddingoptionPadding-
@cascader-dropdown-edge-child-vertical-paddingmenuPadding-
@cascader-dropdown-font-size-已废弃
@cascader-dropdown-line-heightlineHeight全局 Token

Checkbox 多选框

Less 变量Component Token备注
@checkbox-sizecontrolInteractiveSize全局 Token
@checkbox-colorcolorPrimary全局 Token
@checkbox-check-colorcolorWhite-
@checkbox-check-bgcolorPrimary全局 Token
@checkbox-border-widthlineWidth-
@checkbox-border-radiusborderRadiusSM-
@checkbox-group-item-margin-right-由于样式变化已废弃

Collapse 折叠面板

Less 变量Component Token备注
@collapse-header-paddingheaderPadding-
@collapse-header-padding-extra-已废弃
@collapse-header-bgheaderBg-
@collapse-content-paddingcontentPadding-
@collapse-content-bgcontentBg-
@collapse-header-arrow-left-已废弃

DatePicker 日期选择框

Less 变量Component Token备注
@picker-bgcolorBgContainer全局 Token
@picker-basic-cell-hover-colorcellHoverBg-
@picker-basic-cell-active-with-range-colorcellActiveWithRangeBg-
@picker-basic-cell-hover-with-range-colorcellHoverWithRangeBg-
@picker-basic-cell-disabled-bgcellBgDisabled-
@picker-border-colorcolorSplit全局 Token
@picker-date-hover-range-border-colorcellRangeBorderColor-
@picker-date-hover-range-colorcellHoverWithRangeColor-
@picker-time-panel-column-widthtimeColumnWidth-
@picker-time-panel-column-heighttimeColumnHeight-
@picker-time-panel-cell-heighttimeCellHeight-
@picker-panel-cell-heightcellHeight-
@picker-panel-cell-widthcellWidth-
@picker-text-heighttextHeight-
@picker-panel-without-time-cell-heightwithoutTimeCellHeight-

Descriptions 描述列表

less 变量Component Token备注
@descriptions-bglabelBg-
@descriptions-title-margin-bottomtitleMarginBottom-
@descriptions-default-paddingpadding、paddingLG全局 Token,对应值为 ${token.padding}px ${token.paddingLG}px
@descriptions-middle-paddingpaddingSM、paddingLG全局 Token,对应值为 ${token.paddingSM}px ${token.paddingLG}px
@descriptions-small-paddingpaddingXS、padding全局 Token,对应值为 ${token.paddingXS}px ${token.padding}px
@descriptions-item-padding-bottomitemPaddingBottom-
@descriptions-item-trailing-colon-由于样式变化已废弃
@descriptions-item-label-colon-margin-rightcolonMarginRight-
@descriptions-item-label-colon-margin-leftcolonMarginLeft-
@descriptions-extra-colorextraColor-

Divider 分割线

less 变量Component Token备注
@divider-text-paddingtextPaddingInline-
@divider-orientation-marginorientationMargin-
@divider-colorcolorSplit全局 Token
@divider-vertical-gutterverticalMarginInline-

Drawer 抽屉

Less 变量Component Token备注
@drawer-bgcolorBgElevated全局 Token
@drawer-header-paddingpadding、paddingLG全局 Token,对应值为 ${padding}px ${paddingLG}px
@drawer-title-font-sizefontSizeLG全局 Token
@drawer-title-line-heightlineHeightLG全局 Token
@drawer-body-paddingpaddingLG全局 Token
@drawer-footer-padding-verticalfooterPaddingBlockfooterPaddingBlock 为数字,不带单位,@drawer-footer-padding-vertical 带单位
@drawer-footer-padding-horizontalfooterPaddingInlinefooterPaddingInline 为数字,不带单位,@drawer-footer-padding-horizontal 带单位

Dropdown 下拉菜单

Less 变量Component Token备注
@dropdown-selected-colorcolorPrimary全局 Token
@dropdown-menu-submenu-disabled-bgcolorBgElevated全局 Token
@dropdown-selected-bgcontrolItemBgActive全局 Token

Empty 空状态

Less 变量Component Token备注
@empty-font-sizefontSize全局 Token

Form 表单

less 变量Component Token备注
@label-required-colorlabelRequiredMarkColor-
@label-colorlabelColor-
@form-warning-input-bg-由于样式变化已废弃
@form-item-margin-bottomitemMarginBottom-
@form-item-trailing-colon-由于样式变化已废弃
@form-vertical-label-paddingverticalLabelPadding-
@form-vertical-label-marginverticalLabelMargin-
@form-item-label-font-sizelabelFontSize-
@form-item-label-heightlabelHeight-
@form-item-label-colon-margin-rightlabelColonMarginInlineEnd-
@form-item-label-colon-margin-leftlabelColonMarginInlineStart-
@form-error-input-bg-由于样式变化已废弃

Image 图片

less 变量Component Token备注
@image-size-base-未使用已废弃
@image-font-size-base-未使用已废弃
@image-bgcolorFillTertiary全局 Token
@image-colorcolorTextLightSolid全局 Token
@image-preview-operation-sizepreviewOperationSize-
@image-preview-operation-colorpreviewOperationColor-
@image-preview-operation-disabled-colorpreviewOperationColorDisabled-

Input 输入框

less 变量Component Token备注
@input-height-basecontrolHeight全局 Token
@input-height-lgcontrolHeightLG全局 Token
@input-height-smcontrolHeightSM全局 Token
@input-padding-horizontalpaddingInline-
@input-padding-horizontal-basepaddingInline-
@input-padding-horizontal-smpaddingInlineSM-
@input-padding-horizontal-lgpaddingInlineLG-
@input-padding-vertical-basepaddinBlock-
@input-padding-vertical-smpaddingBlockSM-
@input-padding-vertical-lgpaddingBlockLG-
@input-placeholder-colorcolorTextPlaceholder全局 Token
@input-colorcolorText全局 Token
@input-icon-color-已废弃
@input-border-colorcolorBorder全局 Token
@input-bgcolorBgContainer全局 Token
@input-addon-bgaddonBg-
@input-hover-border-colorhoverBorderColor-
@input-disabled-bgcolorBgContainerDisabled全局 Token
@input-outline-offsetactiveShadow控制激活态阴影
@input-icon-hover-colorcolorIconHover全局 Token
@input-disabled-colorcolorTextDisabled全局 Token

InputNumber 数字输入框

less 变量Component Token备注
@input-number-hover-border-colorhoverBorderColor-
@input-number-handler-active-bghandleActiveBg-
@input-number-handler-hover-bghandleHoverColor4.x 中命名有误,实际上是 color
@input-number-handler-bghandleBg-
@input-number-handler-border-colorhandleBorderColor-

Layout 布局

less 变量Component Token备注
@layout-body-backgroundbodyBg-
@layout-header-backgroundheaderBg-
@layout-header-heightheaderHeight-
@layout-header-paddingheaderPadding-
@layout-header-colorheaderColor-
@layout-footer-paddingfooterPadding-
@layout-footer-backgroundfooterBg-
@layout-sider-backgroundsiderBg-
@layout-trigger-heighttriggerHeight-
@layout-trigger-backgroundtriggerBg-
@layout-trigger-colortriggerColor-
@layout-zero-trigger-widthzeroTriggerWidth-
@layout-zero-trigger-heightzeroTriggerHeight-
@layout-sider-background-lightlightSiderBg-
@layout-trigger-background-lightlightTriggerBg-
@layout-trigger-color-lightlightTriggerColor-

List 列表

less 变量Component Token备注
@list-header-backgroundheaderBg-
@list-footer-backgroundfooterBg-
@list-empty-text-paddingemptyTextPadding-
@list-item-paddingitemPadding-
@list-item-padding-smitemPaddingSM-
@list-item-padding-lgitemPaddingLG-
@list-item-meta-margin-bottommetaMarginBottom-
@list-item-meta-avatar-margin-rightavatarMarginRight-
@list-item-meta-title-margin-bottomtitleMarginBottom-
@list-customize-card-bg-由于样式变化已废弃
@list-item-meta-description-font-sizedescriptionFontSize-

Mentions 提及

less 变量Component Token备注
@mentions-dropdown-bgcolorBgElevated全局 Token
@mentions-dropdown-menu-item-hover-bg-已废弃

Menu 导航菜单

Less 变量Component Token备注
@menu-inline-toplevel-item-heightitemHeight同 @menu-item-height
@menu-item-heightitemHeight-
@menu-item-group-heightgroupTitleLineHeight-
@menu-collapsed-widthcollapsedWidth-
@menu-bgitemBg-
@menu-popup-bgpopupBg-
@menu-item-coloritemColor-
@menu-inline-submenu-bgsubMenuItemBg-
@menu-highlight-coloritemSelectedColor-
@menu-highlight-danger-colordangerItemSelectedColor-
@menu-item-active-bgitemActiveBg-
@menu-item-active-danger-bgdangerItemActiveBg-
@menu-item-active-border-widthactiveBarBorderWidth-
@menu-item-group-title-colorgroupTitleColor-
@menu-item-vertical-marginitemMarginBlock-
@menu-item-font-sizefontSize全局 Token
@menu-item-boundary-margin-因样式调整已废弃,可使用 itemMarginBlock 替代
@menu-item-padding-horizontalitemPaddingInline-
@menu-item-padding-已废弃,使用 itemPaddingInline 和 itemHeight 替代
@menu-horizontal-line-heighthorizontalLineHeight-
@menu-icon-margin-righticonMarginInlineEnd-
@menu-icon-sizeiconSize-
@menu-icon-size-lghorizontalLineHeight-
@menu-dark-colordarkItemColor-
@menu-dark-danger-colordarkDangerItemColor-
@menu-dark-bgdarkItemBg-
@menu-dark-arrow-color-已废弃,和文字颜色相同
@menu-dark-inline-submenu-bgdarkSubMenuItemBg-
@menu-dark-highlight-colordarkItemSelectedColor-
@menu-dark-item-active-bgdarkItemSelectedBg-
@menu-dark-item-active-danger-bgdarkDangerItemSelectedBg-
@menu-dark-selected-item-icon-color-已废弃,同 darkItemSelectedColor
@menu-dark-selected-item-text-color-已废弃,同 darkItemSelectedColor
@menu-dark-item-hover-bgdarkItemHoverBg-

Message 全局提示

Less 变量Component Token备注
@zindex-messagezIndexPopup-
@message-notice-content-paddingcontentPadding-
@message-notice-content-bgcontentBg-

Modal 对话框

Less 变量Component Token备注
@modal-header-padding-vertical-由于样式变化已废弃
@modal-header-padding-horizontal-由于样式变化已废弃
@modal-body-padding-由于样式变化已废弃
@modal-header-bgheaderBg-
@modal-header-padding-由于样式变化已废弃
@modal-header-border-width-由于样式变化已废弃
@modal-header-border-style-由于样式变化已废弃
@modal-header-title-line-heighttitleLineHeight-
@modal-header-title-font-sizetitleFontSize-
@modal-header-border-color-split-由于样式变化已废弃
@modal-header-close-size-由于样式变化已废弃
@modal-content-bgcontentBg-
@modal-heading-colortitleColor-
@modal-close-colorcolorIcon全局 Token
@modal-footer-bgfooterBg-
@modal-footer-border-color-split-由于样式变化已废弃
@modal-footer-border-style-由于样式变化已废弃
@modal-footer-padding-vertical-由于样式变化已废弃
@modal-footer-padding-horizontal-由于样式变化已废弃
@modal-footer-border-width-由于样式变化已废弃
@modal-mask-bgcolorBgMask全局 Token
@modal-confirm-body-padding-由于样式变化已废弃
@modal-confirm-title-font-sizetitleFontSize-
@modal-border-radiusborderRadiusLG全局 Token

Pagination 分页

Less 变量Component Token备注
@pagination-item-bgitemBg-
@pagination-item-sizeitemSize-
@pagination-item-size-smitemSizeSM-
@pagination-font-familyfontFamily全局 Token
@pagination-font-weight-activefontWeightStrong全局 Token
@pagination-item-bg-activeitemActiveBg-
@pagination-item-link-bgitemLinkBg-
@pagination-item-disabled-color-activeitemActiveColorDisabled-
@pagination-item-disabled-bg-activeitemActiveBgDisabled-
@pagination-item-input-bgitemInputBg-
@pagination-mini-options-size-changer-topminiOptionsSizeChangerTop-

Popover 气泡卡片

Less variablesComponent TokenNote
@popover-bgcolorBgElevated全局 Token
@popover-colorcolorText全局 Token
@popover-min-widthminWidth-
@popover-min-height-已废弃
@popover-arrow-widthsizePopupArrow全局 Token
@popover-arrow-color-已废弃
@popover-arrow-outer-color-已废弃
@popover-distancemarginXXS全局 Token
@popover-padding-horizontal-已废弃

Progress 进度条

less 变量Component Token备注
@progress-default-colordefaultColor-
@progress-remaining-colorremainingColor-
@progress-info-text-colorcolorText全局 Token
@progress-text-colorcircleTextColor-
@progress-radiuslineBorderRadius-
@progress-steps-item-bgremainingColor-
@progress-text-font-sizefontSizeSM全局 Token
@progress-circle-text-font-sizecircleTextFontSize-

Radio 单选框

less 变量Component Token备注
@radio-sizeradioSize-
@radio-top-已废弃
@radio-border-widthlineWidth全局 Token
@radio-dot-sizedotSize-
@radio-dot-color-已废弃
@radio-dot-disabled-colordotColorDisabled-
@radio-solid-checked-colorbuttonSolidCheckedColor-
@radio-button-bgbuttonBg-
@radio-button-checked-bgbuttonCheckedBg-
@radio-button-colorbuttonColor-
@radio-button-hover-colorcolorPrimaryHover全局 Token
@radio-button-active-colorcolorPrimaryActive全局 Token
@radio-button-padding-horizontalbuttonPaddingInline-
@radio-disabled-button-checked-bgbuttonCheckdBgDisabled-
@radio-disabled-button-checked-colorbuttonCheckdColorDisabled-
@radio-wrapper-margin-rightwrapperMarginInlineEnd-

Rate 评分

less 变量Component Token备注
@rate-star-colorstarColor-
@rate-star-bgstarBg-
@rate-star-sizestarSize-
@rate-star-hover-scalestarHoverScale-

Result 结果

Less 变量Component Token备注
@result-title-font-sizetitleFontSize-
@result-subtitle-font-sizesubtitleFontSize-
@result-extra-marginextraMargin-

Segment

Less 变量Component Token备注
@segmented-container-paddingpadding-
@segmented-label-coloritemColor-
@segmented-bg-可以用 className 或 style 自定义
@segmented-hover-bgitemHoverBg-
@segmented-label-hover-coloritemHoverColor-
@segmented-selected-bgitemSelectedBg-

Select 选择器

Less 变量Component Token备注
@select-border-colorcolorBorder全局 Token
@select-item-selected-coloroptionSelectedColor-
@select-item-selected-font-weightoptionSelectedFontWeight-
@select-dropdown-bgcolorBgElevated全局 Token
@select-item-selected-bgoptionSelectedBg-
@select-item-active-bgoptionActiveBg-
@select-dropdown-vertical-paddingoptionPadding控制整体内间距
@select-dropdown-font-sizeoptionFontSize-
@select-dropdown-line-heightoptionLineHeight-
@select-dropdown-heightoptionHeight-
@select-backgroundselectorBg-
@select-clear-backgroundclearBg-
@select-selection-item-bgmultipleItemBg-
@select-selection-item-border-colormultipleItemBorderColor-
@select-single-item-height-lgsingleItemHeightLG-
@select-multiple-item-heightmultipleItemHeight-
@select-multiple-item-height-lgmultipleItemHeightLG-
@select-multiple-item-spacing-half-已废弃
@select-multiple-disabled-backgroundmultipleSelectorBgDisabled-
@select-multiple-item-disabled-colormultipleItemColorDisabled-
@select-multiple-item-disabled-border-colormultipleItemBorderColorDisabled-

Skeleton 骨架屏

Less 变量Component Token备注
@skeleton-block-radiusblockRadius-
@skeleton-title-heighttitleHeight-
@skeleton-colorgradientFromColor-
@skeleton-to-colorgradientToColor-
@skeleton-paragraph-margin-topparagraphMarginTop-
@skeleton-paragraph-li-heightparagraphLiHeight-
@skeleton-paragraph-li-margin-top-由于样式变化已废弃

Slider 滑动输入条

Less 变量Component Token备注
@slider-margin-可由 className 或 style 直接修改
@slider-rail-background-colorrailBg-
@slider-rail-background-color-hoverrailHoverBg-
@slider-track-background-colortrackBg-
@slider-track-background-color-hovertrackHoverBg-
@slider-handle-border-widthhandleLineWidth-
@slider-handle-background-color-已废弃
@slider-handle-colorhandleColor-
@slider-handle-color-hoverhandleActiveColor-
@slider-handle-color-focushandleActiveColor-
@slider-handle-color-focus-shadow-已废弃
@slider-handle-color-tooltip-openhandleActiveColor-
@slider-handle-sizehandleSize-
@slider-handle-margin-top-已废弃
@slider-handle-margin-left-已废弃
@slider-handle-shadow-已废弃
@slider-dot-border-colordotBorderColor-
@slider-dot-border-color-activedotActiveBorderColor-
@slider-disabled-colortrackBgDisabled-
@slider-disabled-background-color-已废弃

Spin 加载中

Less 变量Component Token备注
@spin-dot-size-smdotSizeSM-
@spin-dot-sizedotSize-
@spin-dot-size-lgdotSizeLG-

Statistic 统计数值

Less 变量Component Token备注
@statistic-title-font-sizetitleFontSize-
@statistic-content-font-sizecontentFontSize-
@statistic-font-familyfontFamily全局 Token

Step 步骤条

Less 变量Component Token备注
@process-tail-colorcolorSplit全局 Token
@steps-nav-arrow-colornavArrowColor-
@steps-backgroundcolorBgContainer-
@steps-icon-sizeiconSize-
@steps-icon-custom-sizecustomIconSize-
@steps-icon-custom-topcustomIconTop-
@steps-icon-custom-font-sizecustomIconFontSize-
@steps-icon-topiconTop-
@steps-icon-font-sizeiconFontSize-
@steps-icon-margin-已废弃
@steps-title-line-heighttitleLineHeight-
@steps-small-icon-sizeiconSizeSM-
@steps-small-icon-margin-已废弃
@steps-dot-sizedotSize-
@steps-dot-top-已废弃
@steps-current-dot-sizedotCurrentSize-
@steps-description-max-widthdescriptionMaxWidth-
@steps-nav-content-max-widthstepsNavContentMaxWidth-
@steps-vertical-icon-widthiconSize-
@steps-vertical-tail-width-已废弃
@steps-vertical-tail-width-sm-已废弃

Switch 开关

Less 变量Component Token备注
@switch-heighttrackHeight-
@switch-sm-heighttrackHeightSM-
@switch-min-widthtrackMinWidth-
@switch-sm-min-widthtrackMinWidthSM-
@switch-disabled-opacityopacityLoading全局 Token
@switch-colorcolorPrimary全局 Token
@switch-bghandleBg-
@switch-shadow-colorhandleShadow控制把手阴影,不仅是颜色
@switch-paddingtrackPadding-
@switch-inner-margin-mininnerMinMargin-
@switch-inner-margin-maxinnerMaxMargin-
@switch-sm-inner-margin-mininnerMinMarginSM-
@switch-sm-inner-margin-maxinnerMaxMarginSM-

Table 表格

Less 变量Component Token备注
@table-bgcolorBgContainer全局 Token
@table-header-bgheaderBg-
@table-header-colorheaderColor-
@table-header-sort-bgheaderSortActiveBg-
@table-body-sort-bgbodySortActiveBg-
@table-row-hover-bgrowHoverBg-
@table-selected-row-colorcolorText全局 Token
@table-selected-row-bgrowSelectedBg-
@table-body-selected-sort-bg-已废弃,同 rowSelectedBg
@table-selected-row-hover-bgrowSelectedHoverBg-
@table-expanded-row-bgrowExpandedBg-
@table-padding-verticalcellPaddingBlock-
@table-padding-horizontalcellPaddingInline-
@table-padding-vertical-mdcellPaddingBlockMD-
@table-padding-horizontal-mdcellPaddingInlineMD-
@table-padding-vertical-smcellPaddingBlockSM-
@table-padding-horizontal-smcellPaddingInlineSM-
@table-border-colorborderColor-
@table-border-radius-baseheaderBorderRadius-
@table-footer-bgfooterBg-
@table-footer-colorfooterColor-
@table-header-bg-sm-已废弃,同 headerBg
@table-font-sizecellFontSize-
@table-font-size-mdcellFontSizeMD-
@table-font-size-smcellFontSizeSM-
@table-header-cell-split-colorheaderSplitColor-
@table-header-sort-active-bgheaderSortHoverBgv4 中有误,实际上用于悬浮背景色
@table-fixed-header-sort-active-bgfixedHeaderSortActiveBg-
@table-header-filter-active-bgheaderFilterHoverBg-
@table-filter-btns-bg-已废弃,同 filterDropdownBg
@table-filter-dropdown-bgfilterDropdownBg-
@table-expand-icon-bgexpandIconBg-
@table-selection-column-widthselectionColumnWidth-
@table-sticky-scroll-bar-bgstickyScrollBarBg-
@table-sticky-scroll-bar-radiusstickyScrollBarBorderRadius-

Tabs 标签页

Less 变量Component Token备注
@tabs-card-head-backgroundcardBg-
@tabs-card-heightcardHeight-
@tabs-card-active-coloritemSelectedColor-
@tabs-card-horizontal-paddingcardPadding-
@tabs-card-horizontal-padding-smcardPaddingSM-
@tabs-card-horizontal-padding-lgcardPaddingLG-
@tabs-title-font-sizetitleFontSize-
@tabs-title-font-size-lgtitleFontSizeLG-
@tabs-title-font-size-smtitleFontSizeSM-
@tabs-ink-bar-colorinkBarColor-
@tabs-bar-marginhorizontalMargin-
@tabs-horizontal-gutterhorizontalItemGutter-
@tabs-horizontal-marginhorizontalItemMargin-
@tabs-horizontal-margin-rtlhorizontalItemMarginRTL-
@tabs-horizontal-paddinghorizontalItemPadding-
@tabs-horizontal-padding-lghorizontalItemPaddingLG-
@tabs-horizontal-padding-smhorizontalItemPaddingSM-
@tabs-vertical-paddingverticalItemPadding-
@tabs-vertical-marginverticalItemMargin-
@tabs-scrolling-size-已废弃
@tabs-highlight-coloritemSelectedColor-
@tabs-hover-coloritemHoverColor-
@tabs-active-coloritemActiveColor-
@tabs-card-guttercardGutter-
@tabs-card-tab-active-border-top-已废弃

Tag 标签

less 变量Component Token备注
@tag-border-radiusborderRadiusSM全局 Token
@tag-default-bgdefaultBg-
@tag-default-colordefaultColor-
@tag-font-sizefontSizeSM全局 Token
@tag-line-heightlineHeightSM全局 Token

Timeline 时间轴

Less 变量Component Token备注
@timeline-widthtailWidthtailWidth 为数字,不带单位,@timeline-width 带单位
@timeline-colortailColor-
@timeline-dot-border-widthdotBorderWidth-
@timeline-dot-color-已废弃
@timeline-dot-bgdotBg-
@timeline-item-padding-bottomitemPaddingBottom-

Tooltip 文字提示

less 变量Component Token备注
@tooltip-max-width-可由 className 或 style 直接修改
@tooltip-colorcolorTextLightSolid全局 Token
@tooltip-bgcolorBgSpotlight全局 token
@tooltip-arrow-widthsizePopupArrow全局 Token
@tooltip-distancemarginXXS全局 Token
@tooltip-arrow-color-同 @tooltip-bg,已废弃
@tooltip-border-radiusborderRadius全局 Token

Transfer 穿梭框

Less variablesComponent TokenNote
@transfer-header-heightheaderHeight-
@transfer-item-heightitemHeight-
@transfer-disabled-bgcolorBgContainerDisabled全局 Token
@transfer-list-heightlistHeight-
@transfer-item-hover-bgcontrolItemBgHover全局 Token
@transfer-item-selected-hover-bgcontrolItemBgActiveHover全局 Token
@transfer-item-padding-verticalitemPaddingBlock-
@transfer-list-search-icon-top-已废弃

Tree 树形控件

Less 变量Component Token备注
@tree-bgcolorBgContainer全局 Token
@tree-title-heighttitleHeight-
@tree-child-padding-已废弃
@tree-directory-selected-colordirectoryNodeSelectedColor-
@tree-directory-selected-bgdirectoryNodeSelectedBg-
@tree-node-hover-bgnodeHoverBg-
@tree-node-selected-bgnodeSelectedBg-

Typography 排版

less 变量Component Token备注
@typography-title-font-weightfontWeightStrong全局 Token
@typography-title-margin-toptitleMarginTop-
@typography-title-margin-bottomtitleMarginBottom-

Upload 上传

less 变量Component Token备注
@upload-actions-coloractionsColor-