Customize Theme
Customize Theme
- Ant Design of React
- v5.22.2Changelog
- Basic Usage
- Advanced
- Migration
- Other
Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.
In version 5.0, we provide a new way to customize themes. Different from the less and CSS variables of the 4.x version, with CSS-in-JS, the ability of theming has also been enhanced, including but not limited to:
In version 5.0 we call the smallest element that affects the theme Design Token. By modifying the Design Token, we can present various themes or components. You can pass theme to ConfigProvider to customize theme. After migrate to V5, theme of V5 will be applied by default.
ConfigProvider will not take effect on static methods such as message.xxx, Modal.xxx, notification.xxx, because in these methods, antd will dynamically create new ones through ReactDOM.render React entities. Its context is not the same as the context of the current code, so context information cannot be obtained.
When you need context information (such as the content configured by ConfigProvider), you can use the Modal.useModal method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use App Component to simplify the problem of usingModal and other methods that need to manually implant the contextHolder.
By modifying token property of theme, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.
Themes with different styles can be quickly generated by modifying algorithm. Ant Design 5.0 provides three sets of preset algorithms by default:
theme.defaultAlgorithmtheme.darkAlgorithmtheme.compactAlgorithmYou can switch algorithms by modifying the algorithm property of theme in ConfigProvider.
In addition to Design Token, each component will also have its own Component Token to achieve style customization capabilities for components, and different components will not affect each other. Similarly, other Design Token of components can also be overridden in this way.
By default, all component tokens can only override global token and will not be derived based on Seed Token.
In version >= 5.8.0, component tokens support the algorithm property, which can be used to enable algorithm or pass in other algorithms.
antd has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting motion of token to false:
In v5, dynamically switching themes is very simple for users, you can dynamically switch themes at any time through the theme property of ConfigProvider without any additional configuration.
By nesting ConfigProvider you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.
If you want to consume the Design Token under the current theme, we provide useToken hook to get Design Token.
When you need token out of React life cycle, you can use static function to get them:
import { theme } from 'antd';const { getDesignToken } = theme;const globalToken = getDesignToken();
Same as ConfigProvider, getDesignToken could also accept a config object as theme:
import type { ThemeConfig } from 'antd';import { theme } from 'antd';import { createRoot } from 'react-dom/client';const { getDesignToken, useToken } = theme;const config: ThemeConfig = {token: {colorPrimary: '#1890ff',},};// By static functionconst globalToken = getDesignToken(config);// By hookconst App = () => {const { token } = useToken();return null;};// Example for renderingcreateRoot(document.getElementById('#app')).render(<ConfigProvider theme={config}><App /></ConfigProvider>,);
If you want to use in preprocess style framework like less, use less-loader for injection:
{loader: "less-loader",options: {lessOptions: {modifyVars: mapToken,},},}
Compatible package provide convert function to transform to v4 less variable. Read this for detail.
We provide tools to help users debug themes: Theme Editor
You can use this tool to freely modify Design Token to meet your theme expectations.
In Design Token, we provide a three-layer structure that is more suitable for the design, and disassemble the Design Token into three parts: Seed Token, Map Token and Alias Token. These three groups of Tokens are not simple groupings, but a three-layer derivation relationship. Map Tokens are derived from Seed Tokens, and Alias Tokens are derived from Map Tokens. In most cases, using Seed Tokens is sufficient for custom themes. But if you need a higher degree of theme customization, you need to understand the life cycle of Design Token in antd.
Seed Token means the origin of all design intent. For example, we can change the theme color by changing colorPrimary, and the algorithm inside antd will automatically calculate and apply a series of corresponding colors according to the Seed Token:
const theme = {token: {colorPrimary: '#1890ff',},};
Map Token is a gradient variable derived from Seed. It is recommended to implement custom Map Token through theme.algorithm, which can ensure the gradient relationship between Map Tokens. It can also be overridden by theme.token to modify the value of some map tokens individually.
const theme = {token: {colorPrimaryBg: '#e6f7ff',},};
Alias Token is used to control the style of some common components in batches, which is basically a Map Token alias, or a specially processed Map Token.
const theme = {token: {colorLink: '#1890ff',},};
The basic algorithm is used to expand the Seed Token into a Map Token, such as calculating a gradient color palette from a basic color, or calculating rounded corners of various sizes from a basic rounded corner. Algorithms can be used alone or in any combination, for example, dark and compact algorithms can be combined to get a dark and compact theme.
import { theme } from 'antd';const { darkAlgorithm, compactAlgorithm } = theme;const theme = {algorithm: [darkAlgorithm, compactAlgorithm],};
| Property | Description | Type | Default |
|---|---|---|---|
| token | Modify Design Token | AliasToken | - |
| inherit | Inherit theme configured in upper ConfigProvider | boolean | true |
| algorithm | Modify the algorithms of theme | (token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[] | defaultAlgorithm |
| components | Modify Component Token and Alias Token applied to components | ComponentsConfig | - |
| cssVar | Toggle CSS Variables, refer CSS Variables | boolean | { prefix?: string; key?: string } | false |
| hashed | Component class Hash value, refer CSS Variables | boolean | true |
| Property | Description | Type | Default |
|---|---|---|---|
Component (Can be any antd Component name like Button) | Modify Component Token or override Component used Alias Token | ComponentToken & AliasToken & { algorithm: boolean | (token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[]} | - |
algorithmof component isfalseby default, which means tokens of component will only override global token. When it is set withtrue, the algorithm will be the same as global. You can also pass algorithm or Array of algorithm, and it will override algorithm of global.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| borderRadius | Border radius of base components | number | 6 |
| colorBgBase | Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code! | string | #fff |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorInfo | Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens. | string | #1677ff |
| colorLink | Control the color of hyperlink. | string | #1677ff |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorTextBase | Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code! | string | #000 |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontFamilyCode | Code font, used for code, pre and kbd elements in Typography | string | 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| motion | Used to configure the motion effect, when it is `false`, the motion is turned off | boolean | true |
| motionBase | number | 0 | |
| motionEaseInBack | Preset motion curve. | string | cubic-bezier(0.71, -0.46, 0.88, 0.6) |
| motionEaseInOut | Preset motion curve. | string | cubic-bezier(0.645, 0.045, 0.355, 1) |
| motionEaseInOutCirc | Preset motion curve. | string | cubic-bezier(0.78, 0.14, 0.15, 0.86) |
| motionEaseInQuint | Preset motion curve. | string | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| motionEaseOut | Preset motion curve. | string | cubic-bezier(0.215, 0.61, 0.355, 1) |
| motionEaseOutBack | Preset motion curve. | string | cubic-bezier(0.12, 0.4, 0.29, 1.46) |
| motionEaseOutCirc | Preset motion curve. | string | cubic-bezier(0.08, 0.82, 0.17, 1) |
| motionEaseOutQuint | Preset motion curve. | string | cubic-bezier(0.23, 1, 0.32, 1) |
| motionUnit | The unit of animation duration change | number | 0.1 |
| opacityImage | Control image opacity | number | 1 |
| sizePopupArrow | The size of the component arrow | number | 16 |
| sizeStep | The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2 | number | 4 |
| sizeUnit | The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step | number | 4 |
| wireframe | Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item | boolean | false |
| zIndexBase | The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc. | number | 0 |
| zIndexPopupBase | Base zIndex of component like FloatButton, Affix which can be cover by large popup | number | 1000 |
Inherit all SeedToken properties
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusOuter | Outer border radius | number | 4 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| colorBgBlur | Control the background color of frosted glass container, usually transparent. | string | transparent |
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorBgLayout | This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong. | string | #f5f5f5 |
| colorBgMask | The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token | string | rgba(0, 0, 0, 0.45) |
| colorBgSolid | Solid background color, currently only used for the default solid button background color. | string | rgb(0, 0, 0) |
| colorBgSolidActive | Solid background color active state, currently only used in the active effect of the default solid button. | string | rgba(0, 0, 0, 0.95) |
| colorBgSolidHover | Solid background color hover state, currently only used in the hover effect of the default solid button. | string | rgba(0, 0, 0, 0.75) |
| colorBgSpotlight | This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip. | string | rgba(0, 0, 0, 0.85) |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorBorderSecondary | Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used. | string | #f0f0f0 |
| colorErrorActive | The active state of the error color. | string | #d9363e |
| colorErrorBg | The background color of the error state. | string | #fff2f0 |
| colorErrorBgActive | The active state background color of the error state. | string | #ffccc7 |
| colorErrorBgFilledHover | The wrong color fills the background color of the suspension state, which is currently only used in the hover effect of the dangerous filled button. | string | #ffdfdc |
| colorErrorBgHover | The hover state background color of the error state. | string | #fff1f0 |
| colorErrorBorder | The border color of the error state. | string | #ffccc7 |
| colorErrorBorderHover | The hover state border color of the error state. | string | #ffa39e |
| colorErrorHover | The hover state of the error color. | string | #ff7875 |
| colorErrorText | The default state of the text in the error color. | string | #ff4d4f |
| colorErrorTextActive | The active state of the text in the error color. | string | #d9363e |
| colorErrorTextHover | The hover state of the text in the error color. | string | #ff7875 |
| colorFill | The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider. | string | rgba(0, 0, 0, 0.15) |
| colorFillQuaternary | The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc. | string | rgba(0, 0, 0, 0.02) |
| colorFillSecondary | The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc. | string | rgba(0, 0, 0, 0.06) |
| colorFillTertiary | The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color. | string | rgba(0, 0, 0, 0.04) |
| colorInfoActive | Active state of dark color of information color. | string | #0958d9 |
| colorInfoBg | Light background color of information color. | string | #e6f4ff |
| colorInfoBgHover | Hover state of light background color of information color. | string | #bae0ff |
| colorInfoBorder | Border color of information color. | string | #91caff |
| colorInfoBorderHover | Hover state of border color of information color. | string | #69b1ff |
| colorInfoHover | Hover state of dark color of information color. | string | #69b1ff |
| colorInfoText | Default state of text color of information color. | string | #1677ff |
| colorInfoTextActive | Active state of text color of information color. | string | #0958d9 |
| colorInfoTextHover | Hover state of text color of information color. | string | #4096ff |
| colorLinkActive | Control the color of hyperlink when clicked. | string | #0958d9 |
| colorLinkHover | Control the color of hyperlink when hovering. | string | #69b1ff |
| colorPrimaryActive | Dark active state under the main color gradient. | string | #0958d9 |
| colorPrimaryBg | Light background color of primary color, usually used for weak visual level selection state. | string | #e6f4ff |
| colorPrimaryBgHover | The hover state color corresponding to the light background color of the primary color. | string | #bae0ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorPrimaryBorderHover | The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button. | string | #69b1ff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorPrimaryText | Text color under the main color gradient. | string | #1677ff |
| colorPrimaryTextActive | Active state of text color under the main color gradient. | string | #0958d9 |
| colorPrimaryTextHover | Hover state of text color under the main color gradient. | string | #4096ff |
| colorSuccessActive | Active state color of dark success color | string | #389e0d |
| colorSuccessBg | Light background color of success color, used for Tag and Alert success state background color | string | #f6ffed |
| colorSuccessBgHover | Light background color of success color, but antd does not use this token currently | string | #d9f7be |
| colorSuccessBorder | Border color of success color, used for Tag and Alert success state border color | string | #b7eb8f |
| colorSuccessBorderHover | Hover state color of success color border | string | #95de64 |
| colorSuccessHover | Hover state color of dark success color | string | #95de64 |
| colorSuccessText | Default state color of success color text | string | #52c41a |
| colorSuccessTextActive | Active state color of success color text | string | #389e0d |
| colorSuccessTextHover | Hover state color of success color text | string | #73d13d |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0, 0, 0, 0.88) |
| colorTextQuaternary | The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc. | string | rgba(0, 0, 0, 0.25) |
| colorTextSecondary | The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc. | string | rgba(0, 0, 0, 0.65) |
| colorTextTertiary | The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc. | string | rgba(0, 0, 0, 0.45) |
| colorWarningActive | The active state of the warning color. | string | #d48806 |
| colorWarningBg | The background color of the warning state. | string | #fffbe6 |
| colorWarningBgHover | The hover state background color of the warning state. | string | #fff1b8 |
| colorWarningBorder | The border color of the warning state. | string | #ffe58f |
| colorWarningBorderHover | The hover state border color of the warning state. | string | #ffd666 |
| colorWarningHover | The hover state of the warning color. | string | #ffd666 |
| colorWarningText | The default state of the text in the warning color. | string | #faad14 |
| colorWarningTextActive | The active state of the text in the warning color. | string | #d48806 |
| colorWarningTextHover | The hover state of the text in the warning color. | string | #ffc53d |
| colorWhite | Pure white color don't changed by theme | string | #fff |
| controlHeightLG | LG component height | number | 40 |
| controlHeightSM | SM component height | number | 24 |
| controlHeightXS | XS component height | number | 16 |
| fontSizeHeading1 | Font size of h1 tag. | number | 38 |
| fontSizeHeading2 | Font size of h2 tag. | number | 30 |
| fontSizeHeading3 | Font size of h3 tag. | number | 24 |
| fontSizeHeading4 | Font size of h4 tag. | number | 20 |
| fontSizeHeading5 | Font size of h5 tag. | number | 16 |
| fontSizeLG | Large font size | number | 16 |
| fontSizeSM | Small font size | number | 12 |
| fontSizeXL | Super large font size | number | 20 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightHeading1 | Line height of h1 tag. | number | 1.2105263157894737 |
| lineHeightHeading2 | Line height of h2 tag. | number | 1.2666666666666666 |
| lineHeightHeading3 | Line height of h3 tag. | number | 1.3333333333333333 |
| lineHeightHeading4 | Line height of h4 tag. | number | 1.4 |
| lineHeightHeading5 | Line height of h5 tag. | number | 1.5 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineHeightSM | Line height of small text. | number | 1.6666666666666667 |
| lineWidthBold | The default line width of the outline class components, such as Button, Input, Select, etc. | number | 2 |
| motionDurationFast | Motion speed, fast speed. Used for small element animation interaction. | string | 0.1s |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| size | number | 16 | |
| sizeLG | number | 24 | |
| sizeMD | number | 20 | |
| sizeMS | number | 16 | |
| sizeSM | number | 12 | |
| sizeXL | number | 32 | |
| sizeXS | number | 8 | |
| sizeXXL | number | 48 | |
| sizeXXS | number | 4 |
Inherit all SeedToken and MapToken properties
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| boxShadow | Control the box shadow style of an element. | string | 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) |
| boxShadowSecondary | Control the secondary box shadow style of an element. | string | 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) |
| boxShadowTertiary | Control the tertiary box shadow style of an element. | string | 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) |
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0, 0, 0, 0.04) |
| colorBgTextActive | Control the background color of text in active state. | string | rgba(0, 0, 0, 0.15) |
| colorBgTextHover | Control the background color of text in hover state. | string | rgba(0, 0, 0, 0.06) |
| colorBorderBg | Control the color of background border of element. | string | #ffffff |
| colorErrorOutline | Control the outline color of input component in error state. | string | rgba(255, 38, 5, 0.06) |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0, 0, 0, 0.02) |
| colorFillContent | Control the background color of content area. | string | rgba(0, 0, 0, 0.06) |
| colorFillContentHover | Control the style of background color of content area when mouse hovers over it. | string | rgba(0, 0, 0, 0.15) |
| colorHighlight | Control the color of page element when highlighted. | string | #ff4d4f |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0, 0, 0, 0.45) |
| colorIconHover | Weak action hover color. Such as `allowClear` or Alert close button | string | rgba(0, 0, 0, 0.88) |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5, 5, 5, 0.06) |
| colorTextDescription | Control the font color of text description. | string | rgba(0, 0, 0, 0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0, 0, 0, 0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0, 0, 0, 0.88) |
| colorTextLabel | Control the font color of text label. | string | rgba(0, 0, 0, 0.65) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextPlaceholder | Control the color of placeholder text. | string | rgba(0, 0, 0, 0.25) |
| colorWarningOutline | Control the outline color of input component in warning state. | string | rgba(255, 215, 5, 0.1) |
| controlInteractiveSize | Control the interactive size of control component. | number | 16 |
| controlItemBgActive | Control the background color of control component item when active. | string | #e6f4ff |
| controlItemBgActiveDisabled | Control the background color of control component item when active and disabled. | string | rgba(0, 0, 0, 0.15) |
| controlItemBgActiveHover | Control the background color of control component item when hovering and active. | string | #bae0ff |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0, 0, 0, 0.04) |
| controlOutline | Control the outline color of input component. | string | rgba(5, 145, 255, 0.1) |
| controlOutlineWidth | Control the outline width of input component. | number | 2 |
| controlPaddingHorizontal | Control the horizontal padding of an element. | number | 12 |
| controlPaddingHorizontalSM | Control the horizontal padding of an element with a small-medium size. | number | 8 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| linkDecoration | Control the text decoration style of a link. | undefined | TextDecoration<string | number> | none |
| linkFocusDecoration | Control the text decoration style of a link on focus. | undefined | TextDecoration<string | number> | none |
| linkHoverDecoration | Control the text decoration style of a link on mouse hover. | undefined | TextDecoration<string | number> | none |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginMD | Control the margin of an element, with a medium-large size. | number | 20 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXL | Control the margin of an element, with an extra-large size. | number | 32 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| opacityLoading | Control the opacity of the loading state. | number | 0.65 |
| padding | Control the padding of the element. | number | 16 |
| paddingContentHorizontal | Control the horizontal padding of content element. | number | 16 |
| paddingContentHorizontalLG | Control the horizontal padding of content element, suitable for large screen devices. | number | 24 |
| paddingContentHorizontalSM | Control the horizontal padding of content element, suitable for small screen devices. | number | 16 |
| paddingContentVertical | Control the vertical padding of content element. | number | 12 |
| paddingContentVerticalLG | Control the vertical padding of content element, suitable for large screen devices. | number | 16 |
| paddingContentVerticalSM | Control the vertical padding of content element, suitable for small screen devices. | number | 8 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingMD | Control the medium padding of the element. | number | 20 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXL | Control the extra large padding of the element. | number | 32 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
| screenLG | Control the screen width of large screens. | number | 992 |
| screenLGMax | Control the maximum width of large screens. | number | 1199 |
| screenLGMin | Control the minimum width of large screens. | number | 992 |
| screenMD | Control the screen width of medium screens. | number | 768 |
| screenMDMax | Control the maximum width of medium screens. | number | 991 |
| screenMDMin | Control the minimum width of medium screens. | number | 768 |
| screenSM | Control the screen width of small screens. | number | 576 |
| screenSMMax | Control the maximum width of small screens. | number | 767 |
| screenSMMin | Control the minimum width of small screens. | number | 576 |
| screenXL | Control the screen width of extra large screens. | number | 1200 |
| screenXLMax | Control the maximum width of extra large screens. | number | 1599 |
| screenXLMin | Control the minimum width of extra large screens. | number | 1200 |
| screenXS | Control the screen width of extra small screens. | number | 480 |
| screenXSMax | Control the maximum width of extra small screens. | number | 575 |
| screenXSMin | Control the minimum width of extra small screens. | number | 480 |
| screenXXL | Control the screen width of extra extra large screens. | number | 1600 |
| screenXXLMin | Control the minimum width of extra extra large screens. | number | 1600 |
theme changed from undefined to some object or to undefined?In ConfigProvider, we pass context through DesignTokenContext. When theme is undefined, a layer of Provider will not be set, so React VirtualDOM structure changes from scratch or from existence to nothing, causing components to be re-mounted. Solution: Replace undefined with an empty object {}.