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:
ConfigProvider
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. Here's a simple example:
import { Button, ConfigProvider } from 'antd';import React from 'react';const App: React.FC = () => (<ConfigProvidertheme={{token: {colorPrimary: '#00b96b',},}}><Button /></ConfigProvider>);export default App;
You will get a theme with primary color #00b96b. And we can see the change in Button:
Themes with different styles can be quickly generated by modifying algorithm
. Ant Design 5.0 provides three sets of preset algorithms by default, which are default algorithm theme.defaultAlgorithm
, dark algorithm theme.darkAlgorithm
and compact algorithm theme.compactAlgorithm
. You can switch algorithms by modifying the algorithm
property of theme
in ConfigProvider.
import { Button, ConfigProvider, theme } from 'antd';import React from 'react';const App: React.FC = () => (<ConfigProvidertheme={{algorithm: theme.darkAlgorithm,}}><Button /></ConfigProvider>);export default App;
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.
import { Checkbox, ConfigProvider, Radio } from 'antd';import React from 'react';const App: React.FC = () => (<ConfigProvidertheme={{components: {Radio: {colorPrimary: '#00b96b',},},}}><Radio>Radio</Radio><Checkbox>Checkbox</Checkbox></ConfigProvider>);export default App;
In this way, we changed the primary color of Radio to #00b96b, and Checkbox is not affected.
Notice:
ConfigProvider
will not take effect on static methods such asmessage.xxx
,Modal.xxx
,notification.xxx
, because in these methods, antd will dynamically create new ones throughReactDOM.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 theModal.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.
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.
import { Button, ConfigProvider } from 'antd';import React from 'react';const App: React.FC = () => (<ConfigProvidertheme={{token: {colorPrimary: '#1677ff',},}}><Button /><ConfigProvidertheme={{token: {colorPrimary: '#1890ff',},}}><Button /></ConfigProvider></ConfigProvider>);export default App;
If you want to consume the Design Token under the current theme, we provide useToken
hook to get Design Token.
import { Button, theme } from 'antd';import React from 'react';const { useToken } = theme;const App: React.FC = () => {const { token } = useToken();return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;};export default App;
When you need token out of React life cycle, you can use static function to get them:
import { theme } from 'antd';const { defaultAlgorithm, defaultSeed } = theme;const mapToken = defaultAlgorithm(defaultSeed);
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.
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],};
Please ref to CSS Compatible.
There are two options for server-side rendering styles, each with advantages and disadvantages:
Use @ant-design/cssinjs
to extract style:
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';import { renderToString } from 'react-dom/server';export default () => {// SSR Renderconst cache = createCache();const html = renderToString(<StyleProvider cache={cache}><MyApp /></StyleProvider>,);// Grab style from cacheconst styleText = extractStyle(cache);// Mix with stylereturn `<!DOCTYPE html><html><head>${styleText}</head><body><div id="root">${html}</div></body></html>`;};
If you want to detach a style file into a css file, try the following schemes:
npm install ts-node tslib --save-dev
tsconfig.node.json
{"compilerOptions": {"strictNullChecks": true,"module": "NodeNext","jsx": "react","esModuleInterop": true},"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]}
scripts/genAntdCss.tsx
// scripts/genAntdCss.tsximport { extractStyle } from '@ant-design/static-style-extract';import fs from 'fs';const outputPath = './public/antd.min.css';const css = extractStyle();fs.writeFileSync(outputPath, css);
If you want to use mixed themes or custom themes, you can use the following script:
import { extractStyle } from '@ant-design/static-style-extract';import { ConfigProvider } from 'antd';import fs from 'fs';import React from 'react';const outputPath = './public/antd.min.css';const testGreenColor = '#008000';const testRedColor = '#ff0000';const css = extractStyle((node) => (<><ConfigProvidertheme={{token: {colorBgBase: testGreenColor,},}}>{node}</ConfigProvider><ConfigProvidertheme={{token: {colorPrimary: testGreenColor,},}}><ConfigProvidertheme={{token: {colorBgBase: testRedColor,},}}>{node}</ConfigProvider></ConfigProvider></>));fs.writeFileSync(outputPath, css);
You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public).
Take Next.js for example(example):
// package.json{"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint","predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx","prebuild": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"}}
Then, you just need to import this file into the pages/_app.tsx
file:
import { StyleProvider } from '@ant-design/cssinjs';import type { AppProps } from 'next/app';import '../public/antd.min.css';import '../styles/globals.css'; // add this lineexport default function App({ Component, pageProps }: AppProps) {return (<StyleProvider hashPriority="high"><Component {...pageProps} /></StyleProvider>);}
If you're using a custom theme for your project, try baking in the following ways:
import { extractStyle } from '@ant-design/static-style-extract';import { ConfigProvider } from 'antd';const cssText = extractStyle((node) => (<ConfigProvidertheme={{token: {colorPrimary: 'red',},}}>{node}</ConfigProvider>));
If you're using a mixed theme for your project, try baking in the following ways:
import { extractStyle } from '@ant-design/static-style-extract';import { ConfigProvider } from 'antd';const cssText = extractStyle((node) => (<><ConfigProvidertheme={{token: {colorBgBase: 'green ',},}}>{node}</ConfigProvider><ConfigProvidertheme={{token: {colorPrimary: 'blue',},}}><ConfigProvidertheme={{token: {colorBgBase: 'red ',},}}>{node}</ConfigProvider></ConfigProvider></>));
More about static-style-extract, see static-style-extract.
Since <style />
tag insertion is different from normal DOM in Shadow DOM scenario, you need to use StyleProvider
of @ant-design/cssinjs
to configure the container
property to set the insertion position:
import { StyleProvider } from '@ant-design/cssinjs';import { createRoot } from 'react-dom/client';const shadowRoot = someEle.attachShadow({ mode: 'open' });const container = document.createElement('div');shadowRoot.appendChild(container);const root = createRoot(container);root.render(<StyleProvider container={shadowRoot}><MyApp /></StyleProvider>,);
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 | OverrideToken | - |
Property | Description | Type | Default |
---|---|---|---|
Component (Can be any antd Component name like Button ) | Modify Component Token or override Component used Alias Token | ComponentToken & AliasToken | - |
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 |
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 | 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 | 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 |
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 | number | 1 | |
sizePopupArrow | 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 | 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 | 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 |
colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
colorBgElevated | string | #ffffff | |
colorBgLayout | 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) |
colorBgSpotlight | 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 |
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 | string | rgba(0, 0, 0, 0.15) | |
colorFillQuaternary | string | rgba(0, 0, 0, 0.02) | |
colorFillSecondary | string | rgba(0, 0, 0, 0.06) | |
colorFillTertiary | 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 |
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 | string | rgba(0, 0, 0, 0.25) | |
colorTextSecondary | string | rgba(0, 0, 0, 0.65) | |
colorTextTertiary | 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) |
colorLink | Control the color of hyperlink. | string | #1677ff |
colorLinkActive | Control the color of hyperlink when clicked. | string | #0958d9 |
colorLinkHover | Control the color of hyperlink when hovering. | string | #69b1ff |
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 |
controlTmpOutline | Default style outline color. | string | rgba(0, 0, 0, 0.02) |
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 | 4 |
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 |
Please ref @ant-design/cssinjs
.
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.
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 {}
.