定制主题

Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。

在 5.0 版本的 Ant Design 中，我们提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强，包括但不限于：

支持动态切换主题；
支持同时存在多个主题；
支持针对某个/某些组件修改主题变量；
...

配置主题

在 5.0 版本中我们把影响主题的最小元素称为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者组件。通过在 ConfigProvider 中传入 theme 属性，可以配置主题。在升级 v5 后，将默认使用 v5 的主题。

WARNING

ConfigProvider 对 message.xxx、Modal.xxx、notification.xxx 等静态方法不会生效，原因是在这些方法中，antd 会通过 ReactDOM.render 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。

当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 Modal.useModal 方法返回 modal 实体以及 contextHolder 节点，将其插入到你需要获取 context 位置即可。也可通过 App 包裹组件简化 useModal 等方法需要手动植入 contextHolder 的问题。

修改主题变量

通过 theme 中的 token 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。

import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // 派生变量，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

使用预设算法

通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是:

默认算法 theme.defaultAlgorithm
暗色算法 theme.darkAlgorithm
紧凑算法 theme.compactAlgorithm

你可以通过 theme 中的 algorithm 属性来切换算法，并且支持配置多种算法，将会依次生效。

import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 1. 单独使用暗色算法
      algorithm: theme.darkAlgorithm,

      // 2. 组合使用暗色算法与紧凑算法
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}
  >
    <Space>
      <Input placeholder="Please Input" />
      <Button type="primary">Submit</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

修改组件变量

除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。

组件级别的主题算法

默认情况下，所有组件变量都仅仅是覆盖，不会基于 Seed Token 计算派生变量。

在 >= 5.8.0 版本中，组件变量支持传入 algorithm 属性，可以开启派生计算或者传入其他算法。

import React from 'react';
import { ConfigProvider, Button, Space, Input, Divider } from 'antd';

const App: React.FC = () => (
  <>
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: '#00b96b',
            algorithm: true, // 启用算法
          },
          Input: {
            colorPrimary: '#eb2f96',
            algorithm: true, // 启用算法
          }
        },
      }}
    >
      <Space>
        <div style={{ fontSize: 14 }}>开启算法：</div>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
    <Divider />
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: '#00b96b',
          },
          Input: {
            colorPrimary: '#eb2f96',
          }
        },
      }}
    >
      <Space>
        <div style={{ fontSize: 14 }}>禁用算法：</div>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
  </>
);

export default App;

Open Sandbox

禁用动画

antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以 token 中的 motion 修改为 false：

import React from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';

const App: React.FC = () => {
  const [checked, setChecked] = React.useState<boolean>(false);
  const timerRef = React.useRef<ReturnType<typeof setInterval>>();
  React.useEffect(() => {
    timerRef.current = setInterval(() => {
      setChecked((prev) => !prev);
    }, 500);
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []);

  const nodes = (
    <Flex gap="small">
      <Checkbox checked={checked}>Checkbox</Checkbox>
      <Radio checked={checked}>Radio</Radio>
      <Switch checked={checked} />
    </Flex>
  );

  return (
    <Row gutter={[24, 24]}>
      <Col span={24}>{nodes}</Col>
      <Col span={24}>
        <ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
      </Col>
    </Row>
  );
};

export default App;

Open Sandbox

进阶使用

动态切换

在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 ConfigProvider 的 theme 属性来动态切换主题，而不需要任何额外配置。

import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';

const App: React.FC = () => {
  const [primary, setPrimary] = React.useState('#1677ff');

  return (
    <>
      <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
      <Divider />
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primary,
          },
        }}
      >
        <Space>
          <Input placeholder="Please Input" />
          <Button type="primary">Submit</Button>
        </Space>
      </ConfigProvider>
    </>
  );
}

export default App;

Open Sandbox

局部主题（嵌套主题）

可以嵌套使用 ConfigProvider 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。

import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1677ff',
      },
    }}
  >
    <Space>
      <Button type="primary">Theme 1</Button>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#00b96b',
          },
        }}
      >
        <Button type="primary">Theme 2</Button>
      </ConfigProvider>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

使用 Design Token

如果你希望使用当前主题下的 Design Token，我们提供了 useToken 这个 hook 来获取 Design Token。

import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: token.fontSize,
      }}
    >
      使用 Design Token
    </div>
  );
};

export default App;

Open Sandbox

静态消费（如 less）

当你需要非 React 生命周期消费 Token 变量时，可以通过静态方法 getDesignToken 将其导出：

import { theme } from 'antd';

const { getDesignToken } = theme;

const globalToken = getDesignToken();

getDesignToken 和 ConfigProvider 一样，支持传入 theme 属性，用于获取指定主题的 Design Token。

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',
  },
};

// 通过静态方法获取
const globalToken = getDesignToken(config);

// 通过 hook 获取
const App = () => {
  const { token } = useToken();
  return null;
};

// 渲染示意
createRoot(document.getElementById('#app')).render(
  <ConfigProvider theme={config}>
    <App />
  </ConfigProvider>,
);

如果需要将其应用到静态样式编译框架，如 less 可以通过 less-loader 注入：

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: mapToken,
    },
  },
}

兼容包提供了变量转换方法用于转成 v4 的 less 变量，如需使用点击此处查看详情。

调试主题

我们提供了帮助用户调试主题的工具：主题编辑器

你可以使用此工具自由地修改 Design Token，以达到你对主题的期望。

基本概念

在 Design Token 中我们提供了一套更加贴合设计的三层结构，将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组，而是一个三层的派生关系，由 Seed Token 派生 Map Token，再由 Map Token 派生 Alias Token。在大部分情况下，使用 Seed Token 就可以满足定制主题的需要。但如果您需要更高程度的主题定制，您需要了解 antd 中 Design Token 的生命周期。

演变过程

token

基础变量（Seed Token）

Seed Token 意味着所有设计意图的起源。比如我们可以通过改变 colorPrimary 来改变主题色，antd 内部的算法会自动的根据 Seed Token 计算出对应的一系列颜色并应用：

const theme = {
  token: {
    colorPrimary: '#1890ff',
  },
};

梯度变量（Map Token）

Map Token 是基于 Seed 派生的梯度变量。定制 Map Token 推荐通过 theme.algorithm 来实现，这样可以保证 Map Token 之间的梯度关系。也可以通过 theme.token 覆盖，用于单独修改一些 map token 的值。

const theme = {
  token: {
    colorPrimaryBg: '#e6f7ff',
  },
};

别名变量（Alias Token）

Alias Token 用于批量控制某些共性组件的样式，基本上是 Map Token 别名，或者特殊处理过的 Map Token。

const theme = {
  token: {
    colorLink: '#1890ff',
  },
};

基本算法（algorithm)

基本算法用于将 Seed Token 展开为 Map Token，比如由一个基本色算出一个梯度色板，或者由一个基本的圆角算出各种大小的圆角。算法可以单独使用，也可以任意地组合使用，比如可以将暗色算法和紧凑算法组合使用，得到一个暗色和紧凑相结合的主题。

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
};

API

Theme

属性	说明	类型	默认值
token	用于修改 Design Token	`AliasToken`	-
inherit	继承上层 ConfigProvider 中配置的主题。	boolean	true
algorithm	用于修改 Seed Token 到 Map Token 的算法	`(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]`	`defaultAlgorithm`
components	用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token	`ComponentsConfig`	-
cssVar	开启 CSS 变量，参考使用 CSS 变量	`boolean \| { prefix?: string; key?: string }`	false
hashed	组件 class Hash 值，参考使用 CSS 变量	boolean	true

ComponentsConfig

属性	说明	类型	默认值
`Component` (可以是任意 antd 组件名，如 `Button`)	用于修改 Component Token 以及覆盖该组件消费的 Alias Token	`ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}`	-

组件级别的 algorithm 默认为 false，此时组件 Token 仅仅会覆盖该组件使用的 token，不会进行派生计算。设置为 true 时会继承当前全局算法；也可以和全局的 algorithm 一样传入一个或多个算法，这将会针对该组件覆盖全局的算法。

SeedToken

토큰 이름	설명	타입	기본값
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

MapToken

继承所有 SeedToken 的属性

토큰 이름	설명	타입	기본값
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

AliasToken

继承所有 SeedToken 和 MapToken 的属性

토큰 이름	설명	타입	기본값
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

FAQ

为什么 `theme` 从 `undefined` 变为对象或者变为 `undefined` 时组件重新 mount 了？

在 ConfigProvider 中我们通过 DesignTokenContext 传递 context，theme 为 undefined 时不会套一层 Provider，所以从无到有或者从有到无时 React 的 VirtualDOM 结构变化，导致组件重新 mount。解决方法：将 undefined 替换为空对象 {} 即可。

支持动态切换主题；
支持同时存在多个主题；
支持针对某个/某些组件修改主题变量；
...

配置主题

WARNING

修改主题变量

通过 theme 中的 token 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。

import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // 派生变量，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

使用预设算法

通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是:

默认算法 theme.defaultAlgorithm
暗色算法 theme.darkAlgorithm
紧凑算法 theme.compactAlgorithm

你可以通过 theme 中的 algorithm 属性来切换算法，并且支持配置多种算法，将会依次生效。

import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 1. 单独使用暗色算法
      algorithm: theme.darkAlgorithm,

      // 2. 组合使用暗色算法与紧凑算法
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}
  >
    <Space>
      <Input placeholder="Please Input" />
      <Button type="primary">Submit</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

修改组件变量

组件级别的主题算法

默认情况下，所有组件变量都仅仅是覆盖，不会基于 Seed Token 计算派生变量。

在 >= 5.8.0 版本中，组件变量支持传入 algorithm 属性，可以开启派生计算或者传入其他算法。

import React from 'react';
import { ConfigProvider, Button, Space, Input, Divider } from 'antd';

const App: React.FC = () => (
  <>
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: '#00b96b',
            algorithm: true, // 启用算法
          },
          Input: {
            colorPrimary: '#eb2f96',
            algorithm: true, // 启用算法
          }
        },
      }}
    >
      <Space>
        <div style={{ fontSize: 14 }}>开启算法：</div>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
    <Divider />
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: '#00b96b',
          },
          Input: {
            colorPrimary: '#eb2f96',
          }
        },
      }}
    >
      <Space>
        <div style={{ fontSize: 14 }}>禁用算法：</div>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
  </>
);

export default App;

Open Sandbox

禁用动画

import React from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';

const App: React.FC = () => {
  const [checked, setChecked] = React.useState<boolean>(false);
  const timerRef = React.useRef<ReturnType<typeof setInterval>>();
  React.useEffect(() => {
    timerRef.current = setInterval(() => {
      setChecked((prev) => !prev);
    }, 500);
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []);

  const nodes = (
    <Flex gap="small">
      <Checkbox checked={checked}>Checkbox</Checkbox>
      <Radio checked={checked}>Radio</Radio>
      <Switch checked={checked} />
    </Flex>
  );

  return (
    <Row gutter={[24, 24]}>
      <Col span={24}>{nodes}</Col>
      <Col span={24}>
        <ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
      </Col>
    </Row>
  );
};

export default App;

Open Sandbox

进阶使用

动态切换

在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 ConfigProvider 的 theme 属性来动态切换主题，而不需要任何额外配置。

import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';

const App: React.FC = () => {
  const [primary, setPrimary] = React.useState('#1677ff');

  return (
    <>
      <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
      <Divider />
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primary,
          },
        }}
      >
        <Space>
          <Input placeholder="Please Input" />
          <Button type="primary">Submit</Button>
        </Space>
      </ConfigProvider>
    </>
  );
}

export default App;

Open Sandbox

局部主题（嵌套主题）

可以嵌套使用 ConfigProvider 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。

import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1677ff',
      },
    }}
  >
    <Space>
      <Button type="primary">Theme 1</Button>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#00b96b',
          },
        }}
      >
        <Button type="primary">Theme 2</Button>
      </ConfigProvider>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

使用 Design Token

如果你希望使用当前主题下的 Design Token，我们提供了 useToken 这个 hook 来获取 Design Token。

import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: token.fontSize,
      }}
    >
      使用 Design Token
    </div>
  );
};

export default App;

Open Sandbox

静态消费（如 less）

当你需要非 React 生命周期消费 Token 变量时，可以通过静态方法 getDesignToken 将其导出：

import { theme } from 'antd';

const { getDesignToken } = theme;

const globalToken = getDesignToken();

getDesignToken 和 ConfigProvider 一样，支持传入 theme 属性，用于获取指定主题的 Design Token。

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',
  },
};

// 通过静态方法获取
const globalToken = getDesignToken(config);

// 通过 hook 获取
const App = () => {
  const { token } = useToken();
  return null;
};

// 渲染示意
createRoot(document.getElementById('#app')).render(
  <ConfigProvider theme={config}>
    <App />
  </ConfigProvider>,
);

如果需要将其应用到静态样式编译框架，如 less 可以通过 less-loader 注入：

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: mapToken,
    },
  },
}

兼容包提供了变量转换方法用于转成 v4 的 less 变量，如需使用点击此处查看详情。

调试主题

我们提供了帮助用户调试主题的工具：主题编辑器

你可以使用此工具自由地修改 Design Token，以达到你对主题的期望。

基本概念

演变过程

token

基础变量（Seed Token）

const theme = {
  token: {
    colorPrimary: '#1890ff',
  },
};

梯度变量（Map Token）

const theme = {
  token: {
    colorPrimaryBg: '#e6f7ff',
  },
};

别名变量（Alias Token）

Alias Token 用于批量控制某些共性组件的样式，基本上是 Map Token 别名，或者特殊处理过的 Map Token。

const theme = {
  token: {
    colorLink: '#1890ff',
  },
};

基本算法（algorithm)

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
};

API

Theme

属性	说明	类型	默认值
token	用于修改 Design Token	`AliasToken`	-
inherit	继承上层 ConfigProvider 中配置的主题。	boolean	true
algorithm	用于修改 Seed Token 到 Map Token 的算法	`(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]`	`defaultAlgorithm`
components	用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token	`ComponentsConfig`	-
cssVar	开启 CSS 变量，参考使用 CSS 变量	`boolean \| { prefix?: string; key?: string }`	false
hashed	组件 class Hash 值，参考使用 CSS 变量	boolean	true

ComponentsConfig

属性	说明	类型	默认值
`Component` (可以是任意 antd 组件名，如 `Button`)	用于修改 Component Token 以及覆盖该组件消费的 Alias Token	`ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}`	-

组件级别的 algorithm 默认为 false，此时组件 Token 仅仅会覆盖该组件使用的 token，不会进行派生计算。设置为 true 时会继承当前全局算法；也可以和全局的 algorithm 一样传入一个或多个算法，这将会针对该组件覆盖全局的算法。

SeedToken

토큰 이름	설명	타입	기본값
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

MapToken

继承所有 SeedToken 的属性

토큰 이름	설명	타입	기본값
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

AliasToken

继承所有 SeedToken 和 MapToken 的属性

토큰 이름	설명	타입	기본값
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

定制主题

配置主题

修改主题变量

使用预设算法

修改组件变量

禁用动画

进阶使用

动态切换

局部主题（嵌套主题）

使用 Design Token

静态消费（如 less）

调试主题

基本概念

演变过程

基础变量（Seed Token）

梯度变量（Map Token）

别名变量（Alias Token）

基本算法（algorithm)

API

Theme

ComponentsConfig

SeedToken

MapToken

AliasToken

FAQ

为什么 theme 从 undefined 变为对象或者变为 undefined 时组件重新 mount 了？

配置主题

修改主题变量

使用预设算法

修改组件变量

禁用动画

进阶使用

动态切换

局部主题（嵌套主题）

使用 Design Token

静态消费（如 less）

调试主题

基本概念

演变过程

基础变量（Seed Token）

梯度变量（Map Token）

别名变量（Alias Token）

基本算法（algorithm)

API

Theme

ComponentsConfig

SeedToken

MapToken

AliasToken

FAQ

为什么 theme 从 undefined 变为对象或者变为 undefined 时组件重新 mount 了？

为什么 `theme` 从 `undefined` 变为对象或者变为 `undefined` 时组件重新 mount 了？

为什么 `theme` 从 `undefined` 变为对象或者变为 `undefined` 时组件重新 mount 了？