ant-design/docs/react/migrate-less-variables.zh-CN.md

order	title
9	Less 变量迁移 Design Token

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

组件变量

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

BreadCrumb 面包屑

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	-

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 带单位

Dropdown 下拉菜单

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

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	-

Message 全局提示

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

Modal 对话框

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

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-icon-font-size	iconFontSize	-
@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	-	由于样式变化已废弃

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	-	已废弃

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	-

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	-