logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Ant Design of React
  • Getting Started
  • Real project with Umi
  • Use in create-react-app
  • Use in TypeScript
  • CSS Compatible
  • Customize Theme
  • Use custom date library
  • V4 to V5
  • Migrate Less variables to Component Token
  • Third-Party Libraries
  • Internationalization
  • FAQ
  • Contributing
  • Change Log
Component Token
Drawer
Message
Modal
Result
Statistic
Step

Migrate Less variables to Component Token

V4 to V5Third-Party Libraries

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table.

Note: There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x.

Component Token

Drawer

Less variablesComponent TokenNote
@drawer-bgcolorBgElevatedGlobalToken
@drawer-header-paddingpadding、paddingLGGlobalToken, used as ${padding}px ${paddingLG}px
@drawer-title-font-sizefontSizeLGGlobalToken
@drawer-title-line-heightlineHeightLGGlobalToken
@drawer-body-paddingpaddingLGGlobalToken
@drawer-footer-padding-verticalfooterPaddingBlockfooterPaddingBlock is a number without units, @drawer-footer-padding-vertical with units
@drawer-footer-padding-horizontalfooterPaddingInlinefooterPaddingInline is a number without units, @drawer-footer-padding-horizontal with units

Message

Less variablesComponent TokenNote
@zindex-messagezIndexPopup-
@message-notice-content-paddingcontentPadding-
@message-notice-content-bgcontentBg-

Modal

Less variablesComponent TokenNote
@modal-header-padding-vertical-Deprecated for style change
@modal-header-padding-horizontal-Deprecated for style change
@modal-body-padding-Deprecated for style change
@modal-header-bgheaderBg-
@modal-header-padding-Deprecated for style change
@modal-header-border-width-Deprecated for style change
@modal-header-border-style-Deprecated for style change
@modal-header-title-line-heighttitleLineHeight-
@modal-header-title-font-sizetitleFontSize-
@modal-header-border-color-split-Deprecated for style change
@modal-header-close-size-Deprecated for style change
@modal-content-bgcontentBg-
@modal-heading-colortitleColor-
@modal-close-colorcolorIconGlobalToken
@modal-footer-bgfooterBg-
@modal-footer-border-color-split-Deprecated for style change
@modal-footer-border-style-Deprecated for style change
@modal-footer-padding-vertical-Deprecated for style change
@modal-footer-padding-horizontal-Deprecated for style change
@modal-footer-border-width-Deprecated for style change
@modal-mask-bgcolorBgMaskGlobalToken
@modal-confirm-body-padding-Deprecated for style change
@modal-confirm-title-font-sizetitleFontSize-
@modal-border-radiusborderRadiusLGGlobalToken

Result

Less variablesComponent TokenNote
@result-icon-font-sizeiconFontSize-
@result-title-font-sizetitleFontSize-
@result-subtitle-font-sizesubtitleFontSize-
@result-extra-marginextraMargin-

Statistic

Less variablesComponent TokenNote
@statistic-title-font-sizetitleFontSize-
@statistic-content-font-sizecontentFontSize-
@statistic-font-familyfontFamilyGlobalToken

Step

Less variablesComponent TokenNote
@process-tail-colorcolorSplitGlobalToken
@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-Deprecated
@steps-title-line-heighttitleLineHeight-
@steps-small-icon-sizeiconSizeSM-
@steps-small-icon-margin-Deprecated
@steps-dot-sizedotSize-
@steps-dot-top-Deprecated
@steps-current-dot-sizedotCurrentSize-
@steps-description-max-widthdescriptionMaxWidth-
@steps-nav-content-max-widthstepsNavContentMaxWidth-
@steps-vertical-icon-widthiconSize-
@steps-vertical-tail-width-Deprecated
@steps-vertical-tail-width-sm-Deprecated