Customize Theme
Customize Theme
- React의 Ant Design
- Ant Design of React
- Ant Design of React
- v5.21.3Changelog
- 기본 사용법
- 如何使用
- 迁移
- 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.
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| borderRadius | 기본 컴포넌트의 모서리 크기, 예: 버튼, 입력 창, 카드 등. | number | 6 |
| colorBgBase | 배경색 그라데이션을 파생시키는 기본 변수를 사용하여, v5에서는 배경색의 파생 알고리즘을 추가하여 명확한 그라데이션의 배경색을 생성할 수 있는 그라데이션 변수를 도출할 수 있습니다. 하지만 코드 내에서 해당 Seed Token을 직접 사용하지 마세요! | string | #fff |
| colorError | 오류 Button, 오류 Result 컴포넌트 등 작업 실패의 시각적 요소를 나타내는 데 사용됩니다. | string | #ff4d4f |
| colorInfo | Alert, Tag, Progress 등과 같은 컴포넌트에서 사용하는 토큰 시퀀스의 작업 정보를 나타내는 데 사용됩니다. 해당 그룹의 그라데이션 변수가 사용됩니다. | string | #1677ff |
| colorLink | 控制超链接的颜色。 | string | #1677ff |
| colorPrimary | 브랜드 색상은 제품의 특성과 커뮤니케이션을 반영하는 가장 직접적인 시각적 요소 중 하나입니다. 브랜드 색상을 선택하면, 자동으로 전체 색상 팔레트를 생성하고 효과적인 디자인 의미를 부여합니다. | string | #1677ff |
| colorSuccess | 작업 성공을 나타내는 토큰 시퀀스입니다. Result, Progress 등의 컴포넌트에서 이 맵 토큰을 사용합니다. | string | #52c41a |
| colorTextBase | 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！ | string | #000 |
| colorWarning | 경고를 나타내는 토큰 시퀀스입니다. Notification, Alert 등의 경고성 컴포넌트나 Input 등의 제어 컴포넌트에서 이 맵 토큰을 사용합니다. | string | #faad14 |
| controlHeight | Ant Design에서 버튼과 입력 창 등 기본 컨트롤의 높이 | number | 32 |
| fontFamily | Ant Design의 글꼴 모음은 시스템의 기본 인터페이스 글꼴을 우선시하며, 친근하고 안정적이며 전문적인 특성을 반영하여 다양한 플랫폼과 브라우저에서 글꼴의 가독성과 가독성을 유지하기 위해 화면 디스플레이에 적합한 대체 글꼴 라이브러리 세트를 제공합니다. | 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 | 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素 | string | 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace |
| fontSize | 디자인 시스템에서 가장 널리 사용되는 글꼴 크기로, 텍스트 그라데이션이 파생됩니다. | number | 14 |
| lineType | 컴포넌트의 테두리, 분할선 등의 스타일을 제어하는 데 사용되며, 기본값은 실선입니다. | string | solid |
| lineWidth | 컴포넌트의 테두리, 구분선 등의 두너를 제어하는 데 사용됩니다. | number | 1 |
| motion | 用于配置动画效果，为 `false` 时则关闭动画 | boolean | true |
| motionBase | number | 0 | |
| motionEaseInBack | 预设动效曲率 | string | cubic-bezier(0.71, -0.46, 0.88, 0.6) |
| motionEaseInOut | 미리 설정된 애니메이션 곡률. | string | cubic-bezier(0.645, 0.045, 0.355, 1) |
| motionEaseInOutCirc | 모션 커브를 미리 설정합니다. | string | cubic-bezier(0.78, 0.14, 0.15, 0.86) |
| motionEaseInQuint | 모션 커브를 미리 설정합니다. | string | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| motionEaseOut | 预设动效曲率 | string | cubic-bezier(0.215, 0.61, 0.355, 1) |
| motionEaseOutBack | 기본 동작 곡선입니다. | string | cubic-bezier(0.12, 0.4, 0.29, 1.46) |
| motionEaseOutCirc | 모션 커브를 미리 설정합니다. | string | cubic-bezier(0.08, 0.82, 0.17, 1) |
| motionEaseOutQuint | 모션 커브를 미리 설정합니다. | string | cubic-bezier(0.23, 1, 0.32, 1) |
| motionUnit | 用于控制动画时长的变化单位 | number | 0.1 |
| opacityImage | 控制图片不透明度 | number | 1 |
| sizePopupArrow | 화살표 컴포넌트의 크기 | number | 16 |
| sizeStep | 用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2 | number | 4 |
| sizeUnit | 用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度 | number | 4 |
| wireframe | 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项 | boolean | false |
| zIndexBase | 所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等 | number | 0 |
| zIndexPopupBase | 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等 | number | 1000 |
Inherit all SeedToken properties
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| borderRadiusLG | Card, Modal 및 다른 컴포넌트와 같이 테두리 반경이 큰 일부 컴포넌트에 사용되는 LG 크기 테두리 반경입니다. | number | 8 |
| borderRadiusOuter | 外部圆角 | number | 4 |
| borderRadiusSM | Button, Input, Select 및 작은 크기의 다른 입력 컴포넌트와 같이 작은 크기의 컴포넌트에 사용되는 SM 크기 테두리 반경입니다. | number | 4 |
| borderRadiusXS | Segmented, Arrow 및 테두리 반경이 작은 다른 컴포넌트와 같이 테두리 반경이 작은 일부 컴포넌트에 사용되는 XS 크기 테두리 반경입니다. | number | 2 |
| colorBgBlur | 控制毛玻璃容器的背景色，通常为透明色。 | string | transparent |
| colorBgContainer | 컨테이너 배경 색상, 예: 기본 버튼, 입력 상자, 등. `colorBgElevated`와 혼동을 주의하세요. | string | #ffffff |
| colorBgElevated | 팝업 레이어의 컨테이너 배경색으로, 다크 모드에서 이 토큰의 색상 값은 `colorBgContainer`보다 약간 밝습니다. 예 : modal, pop-up, menu 등 | string | #ffffff |
| colorBgLayout | 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的 | string | #f5f5f5 |
| colorBgMask | 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用的是该 token | string | rgba(0, 0, 0, 0.45) |
| colorBgSolid | 实心的背景颜色，目前只用在默认实心按钮背景色上。 | string | rgb(0, 0, 0) |
| colorBgSolidActive | 实心的背景颜色激活态，目前只用在默认实心按钮的 active 效果。 | string | rgba(0, 0, 0, 0.95) |
| colorBgSolidHover | 实心的背景颜色悬浮态，目前只用在默认实心按钮的 hover 效果。 | string | rgba(0, 0, 0, 0.75) |
| colorBgSpotlight | 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。 | string | rgba(0, 0, 0, 0.85) |
| colorBorder | 기본적으로 사용되는 테두리 색상은 서로 다른 요소를 구분하는 데 사용됩니다. 예: 폼의 구분선, 카드의 구분선 등. | string | #d9d9d9 |
| colorBorderSecondary | 比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。 | string | #f0f0f0 |
| colorErrorActive | 错误色的深色激活态 | string | #d9363e |
| colorErrorBg | 오류 배경색. | string | #fff2f0 |
| colorErrorBgActive | 错误色的浅色背景色激活态 | string | #ffccc7 |
| colorErrorBgFilledHover | 错误色的浅色填充背景色悬浮态，目前只用在危险填充按钮的 hover 效果。 | string | #ffdfdc |
| colorErrorBgHover | 오류 배경색의 호버 상태. | string | #fff1f0 |
| colorErrorBorder | 错误色的描边色 | string | #ffccc7 |
| colorErrorBorderHover | 错误色的描边色悬浮态 | string | #ffa39e |
| colorErrorHover | 오류 색상의 Hover 상태입니다. | string | #ff7875 |
| colorErrorText | 错误色的文本默认态 | string | #ff4d4f |
| colorErrorTextActive | 错误色的文本激活态 | string | #d9363e |
| colorErrorTextHover | 错误色的文本悬浮态 | string | #ff7875 |
| colorFill | 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。 | string | rgba(0, 0, 0, 0.15) |
| colorFillQuaternary | 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。 | string | rgba(0, 0, 0, 0.02) |
| colorFillSecondary | 2차 채우기 색상은 Rate, Skeleton 등의 요소의 형체를 더 명확하게 윤곽을 그릴 수 있습니다. 또한 Table 등에서 3차 채우기 색상의 호버 상태로 사용할 수도 있습니다. | string | rgba(0, 0, 0, 0.06) |
| colorFillTertiary | 3차 채우기 색상은 Slider, Segmented 등의 요소 형체를 윤곽 그리는 데 사용됩니다. 특별한 강조가 필요하지 않다면 3차 채우기 색상을 기본 채우기 색상으로 사용하는 것을 권장합니다. | string | rgba(0, 0, 0, 0.04) |
| colorInfoActive | 信息色的深色激活态。 | string | #0958d9 |
| colorInfoBg | 信息色的浅色背景颜色。 | string | #e6f4ff |
| colorInfoBgHover | 信息色的浅色背景色悬浮态。 | string | #bae0ff |
| colorInfoBorder | 信息色的描边色。 | string | #91caff |
| colorInfoBorderHover | 信息色的描边色悬浮态。 | string | #69b1ff |
| colorInfoHover | 信息色的深色悬浮态。 | string | #69b1ff |
| colorInfoText | 信息色的文本默认态。 | string | #1677ff |
| colorInfoTextActive | 信息色的文本激活态。 | string | #0958d9 |
| colorInfoTextHover | 信息色的文本悬浮态。 | string | #4096ff |
| colorLinkActive | 控制超链接被点击时的颜色。 | string | #0958d9 |
| colorLinkHover | 控制超链接悬浮时的颜色。 | string | #69b1ff |
| colorPrimaryActive | 主色梯度下的深色激活态。 | string | #0958d9 |
| colorPrimaryBg | 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。 | string | #e6f4ff |
| colorPrimaryBgHover | 与主色浅色背景颜色相对应的悬浮态颜色。 | string | #bae0ff |
| colorPrimaryBorder | Slider와 같은 컴포넌트의 획에 사용되는 주 색상 그라데이션 아래의 획 색상입니다. | string | #91caff |
| colorPrimaryBorderHover | 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。 | string | #69b1ff |
| colorPrimaryHover | 주요 색상의 그라데이션의 호버 상태. | string | #4096ff |
| colorPrimaryText | 主色梯度下的文本颜色。 | string | #1677ff |
| colorPrimaryTextActive | 主色梯度下的文本激活态。 | string | #0958d9 |
| colorPrimaryTextHover | 主色梯度下的文本悬浮态。 | string | #4096ff |
| colorSuccessActive | 成功色的深色激活态 | string | #389e0d |
| colorSuccessBg | 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色 | string | #f6ffed |
| colorSuccessBgHover | 成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 token | string | #d9f7be |
| colorSuccessBorder | 成功色的描边色，用于 Tag 和 Alert 的成功态描边色 | string | #b7eb8f |
| colorSuccessBorderHover | 成功色的描边色悬浮态 | string | #95de64 |
| colorSuccessHover | 成功色的深色悬浮态 | string | #95de64 |
| colorSuccessText | 成功色的文本默认态 | string | #52c41a |
| colorSuccessTextActive | 成功色的文本激活态 | string | #389e0d |
| colorSuccessTextHover | 成功色的文本悬浮态 | string | #73d13d |
| colorText | W3C 표준을 준수하는 기본 텍스트 색상으로, 이 색상은 가장 어두운 중립적인 색상이기도 합니다. | string | rgba(0, 0, 0, 0.88) |
| colorTextQuaternary | 4차 텍스트 색상은 가장 연한 텍스트 색상으로, 예를 들어 폼의 입력 힌트 텍스트, 비활성화된 텍스트 등이 해당됩니다. | string | rgba(0, 0, 0, 0.25) |
| colorTextSecondary | 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。 | string | rgba(0, 0, 0, 0.65) |
| colorTextTertiary | 3차 텍스트 색상은 주로 설명 텍스트에 사용됩니다. 예: 폼의 보충 설명 텍스트, 목록의 설명 텍스트 등 장면 | string | rgba(0, 0, 0, 0.45) |
| colorWarningActive | 警戒色的深色激活态 | string | #d48806 |
| colorWarningBg | 경고 배경색 | string | #fffbe6 |
| colorWarningBgHover | 경고 배경색의 호버 상태 | string | #fff1b8 |
| colorWarningBorder | 警戒色的描边色 | string | #ffe58f |
| colorWarningBorderHover | 警戒色的描边色悬浮态 | string | #ffd666 |
| colorWarningHover | 경고 색상의 호버 상태 | string | #ffd666 |
| colorWarningText | 警戒色的文本默认态 | string | #faad14 |
| colorWarningTextActive | 警戒色的文本激活态 | string | #d48806 |
| colorWarningTextHover | 警戒色的文本悬浮态 | string | #ffc53d |
| colorWhite | 不随主题变化的纯白色 | string | #fff |
| controlHeightLG | LG 컴포넌트 높이 | number | 40 |
| controlHeightSM | SM 컴포넌트 높이 | number | 24 |
| controlHeightXS | XS 컴포넌트 높이 | number | 16 |
| fontSizeHeading1 | H1 标签所使用的字号 | number | 38 |
| fontSizeHeading2 | h2 标签所使用的字号 | number | 30 |
| fontSizeHeading3 | h3 标签使用的字号 | number | 24 |
| fontSizeHeading4 | h4 标签使用的字号 | number | 20 |
| fontSizeHeading5 | h5 标签使用的字号 | number | 16 |
| fontSizeLG | LG 폰트 크기 | number | 16 |
| fontSizeSM | 작은 글꼴 크기 | number | 12 |
| fontSizeXL | 超大号字体大小 | number | 20 |
| lineHeight | 텍스트의 행간 | number | 1.5714285714285714 |
| lineHeightHeading1 | H1 标签所使用的行高 | number | 1.2105263157894737 |
| lineHeightHeading2 | h2 标签所使用的行高 | number | 1.2666666666666666 |
| lineHeightHeading3 | h3 태그의 줄 높이 | number | 1.3333333333333333 |
| lineHeightHeading4 | h4 标签所使用的行高 | number | 1.4 |
| lineHeightHeading5 | h5 标签所使用的行高 | number | 1.5 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineHeightSM | 小型文本行高 | number | 1.6666666666666667 |
| lineWidthBold | 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。 | number | 2 |
| motionDurationFast | 动效播放速度，快速。用于小型元素动画交互 | string | 0.1s |
| motionDurationMid | 모션 속도, 중간 속도. 중간 요소 애니메이션 상호 작용에 사용됩니다. | string | 0.2s |
| motionDurationSlow | 동작 재생 속도, 느린 속도입니다. 대형 요소의 패널 애니메이션 상호작용에 사용됩니다. | 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
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| boxShadow | 控制元素阴影样式。 | 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 | 요소의 보조 상자 그림자 스타일을 제어합니다. | 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 | 控制元素三级盒子阴影样式。 | 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 | 비활성화된 컨테이너 배경색 | string | rgba(0, 0, 0, 0.04) |
| colorBgTextActive | 控制文本在激活状态下的背景色。 | string | rgba(0, 0, 0, 0.15) |
| colorBgTextHover | 控制文本在悬停状态下的背景色。 | string | rgba(0, 0, 0, 0.06) |
| colorBorderBg | 요소의 배경 테두리 색상을 제어합니다. | string | #ffffff |
| colorErrorOutline | 입력 컴포넌트 오류 상태에서 외곽선 색상을 제어합니다. | string | rgba(255, 38, 5, 0.06) |
| colorFillAlter | 요소의 대체할 배경색을 제어합니다. | string | rgba(0, 0, 0, 0.02) |
| colorFillContent | 控制内容区域的背景色。 | string | rgba(0, 0, 0, 0.06) |
| colorFillContentHover | 控制内容区域背景色在鼠标悬停时的样式。 | string | rgba(0, 0, 0, 0.15) |
| colorHighlight | 控制页面元素高亮时的颜色。 | string | #ff4d4f |
| colorIcon | 약한 조작 아이콘의 색상을 제어합니다. 예: allowClear 또는 Alert 닫기 버튼. * | string | rgba(0, 0, 0, 0.45) |
| colorIconHover | 약한 조작 아이콘의 호버 상태에서 색상을 제어합니다. 예: allowClear 또는 Alert 닫기 버튼. | string | rgba(0, 0, 0, 0.88) |
| colorSplit | 구분선의 색상으로 사용되며, 이 색상은 colorBorderSecondary와 동일하지만 투명도가 있습니다. | string | rgba(5, 5, 5, 0.06) |
| colorTextDescription | 텍스트 설명의 글꼴 색상을 제어합니다. | string | rgba(0, 0, 0, 0.45) |
| colorTextDisabled | 비활성화 상태에서의 글자 색상을 제어하다。 | string | rgba(0, 0, 0, 0.25) |
| colorTextHeading | 헤딩의 텍스트 색상을 제어합니다. | string | rgba(0, 0, 0, 0.88) |
| colorTextLabel | 텍스트 레이블의 글꼴 색상을 제어합니다. | string | rgba(0, 0, 0, 0.65) |
| colorTextLightSolid | Primary Button 컴포넌트의 텍스트와 같이 배경색으로 텍스트의 하이라이트 색상을 제어합니다. | string | #fff |
| colorTextPlaceholder | 비활성화 상태에서의 글자 색상을 제어하다 | string | rgba(0, 0, 0, 0.25) |
| colorWarningOutline | 입력 컴포넌트 경고 상태에서 외곽선 색상을 제어합니다 | string | rgba(255, 215, 5, 0.1) |
| controlInteractiveSize | 控制组件的交互大小。 | number | 16 |
| controlItemBgActive | 활성화 시 제어 컴포넌트 요소의 배경색을 제어합니다. | string | #e6f4ff |
| controlItemBgActiveDisabled | 控制组件项在禁用状态下的激活背景颜色。 | string | rgba(0, 0, 0, 0.15) |
| controlItemBgActiveHover | 마우스를 올리고 활성화할 때 제어 컴포넌트 요소의 배경색을 제어합니다. | string | #bae0ff |
| controlItemBgHover | 마우스를 올릴 때 제어 컴포넌트 요소의 배경색을 제어합니다. | string | rgba(0, 0, 0, 0.04) |
| controlOutline | 입력 컴포넌트의 외곽선 색상을 제어합니다. | string | rgba(5, 145, 255, 0.1) |
| controlOutlineWidth | 입력 컴포넌트의 외곽선 너비를 제어합니다. | number | 2 |
| controlPaddingHorizontal | 요소의 가로 안쪽 여백을 제어합니다. | number | 12 |
| controlPaddingHorizontalSM | SM 크기 요소의 수평 패딩을 제어합니다. | number | 8 |
| fontSizeIcon | Select, Cascader 등에서 작업 아이콘의 글꼴 크기를 제어합니다. 일반적으로 fontSizeSM과 동일합니다. | number | 12 |
| fontWeightStrong | 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。 | number | 600 |
| lineWidthFocus | 컴포넌트가 포커스 상태에 있을 때 선의 너비를 제어합니다. | number | 3 |
| linkDecoration | 控制链接文本的装饰样式。 | undefined | TextDecoration<string | number> | none |
| linkFocusDecoration | 控制链接聚焦时文本的装饰样式。 | undefined | TextDecoration<string | number> | none |
| linkHoverDecoration | 控制链接鼠标悬浮时文本的装饰样式。 | undefined | TextDecoration<string | number> | none |
| margin | 控制元素外边距，中等尺寸。 | number | 16 |
| marginLG | 控制元素外边距，大尺寸。 | number | 24 |
| marginMD | 控制元素外边距，中大尺寸。 | number | 20 |
| marginSM | 控制元素外边距，中小尺寸。 | number | 12 |
| marginXL | 控制元素外边距，超大尺寸。 | number | 32 |
| marginXS | 요소의 여백을 작은 크기로 제어합니다. | number | 8 |
| marginXXL | 控制元素外边距，最大尺寸。 | number | 48 |
| marginXXS | 요소의 여백을 가장 작은 크기로 제어합니다. | number | 4 |
| opacityLoading | 控制加载状态的透明度。 | number | 0.65 |
| padding | 요소의 안쪽 여백을 제어합니다. | number | 16 |
| paddingContentHorizontal | 控制内容元素水平内间距。 | number | 16 |
| paddingContentHorizontalLG | 控制内容元素水平内间距，适用于大屏幕设备。 | number | 24 |
| paddingContentHorizontalSM | 控制内容元素水平内间距，适用于小屏幕设备。 | number | 16 |
| paddingContentVertical | 控制内容元素垂直内间距。 | number | 12 |
| paddingContentVerticalLG | 控制内容元素垂直内间距，适用于大屏幕设备。 | number | 16 |
| paddingContentVerticalSM | 控制内容元素垂直内间距，适用于小屏幕设备。 | number | 8 |
| paddingLG | 요소의 큰 패딩을 제어합니다. | number | 24 |
| paddingMD | 控制元素的中等内间距。 | number | 20 |
| paddingSM | 요소의 작은 내부 여백을 제어합니다. | number | 12 |
| paddingXL | 요소의 매우 큰 패딩을 제어합니다. | number | 32 |
| paddingXS | 요소의 매우 작은 안쪽 여백을 제어합니다. | number | 8 |
| paddingXXS | 요소의 아주 매우 작은 안쪽 여백을 제어합니다. | number | 4 |
| screenLG | 控制大屏幕的屏幕宽度。 | number | 992 |
| screenLGMax | 控制大屏幕的最大宽度。 | number | 1199 |
| screenLGMin | 控制大屏幕的最小宽度。 | number | 992 |
| screenMD | 控制中等屏幕的屏幕宽度。 | number | 768 |
| screenMDMax | 控制中等屏幕的最大宽度。 | number | 991 |
| screenMDMin | 控制中等屏幕的最小宽度。 | number | 768 |
| screenSM | 控制小屏幕的屏幕宽度。 | number | 576 |
| screenSMMax | 控制小屏幕的最大宽度。 | number | 767 |
| screenSMMin | 控制小屏幕的最小宽度。 | number | 576 |
| screenXL | 控制超大屏幕的屏幕宽度。 | number | 1200 |
| screenXLMax | 控制超大屏幕的最大宽度。 | number | 1599 |
| screenXLMin | 控制超大屏幕的最小宽度。 | number | 1200 |
| screenXS | 控制超小屏幕的屏幕宽度。 | number | 480 |
| screenXSMax | 控制超小屏幕的最大宽度。 | number | 575 |
| screenXSMin | 控制超小屏幕的最小宽度。 | number | 480 |
| screenXXL | 控制超超大屏幕的屏幕宽度。 | number | 1600 |
| screenXXLMin | 控制超超大屏幕的最小宽度。 | 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 {}.