테마 커스터마이징

비즈니스에서의 UI 다양성 또는 primary 색상, border radius, border color 등을 포함한 브랜드 요구사항을 충족하기 위해 Ant Design은 디자인 토큰을 커스터마이징 할수 있습니다.

5.0 버전에서 테마를 커스터마이징하는 새로운 방법을 제공하고 있습니다. 4.x버전의 less와 CSS 변수와 달리, CSS-in-JS로 테마 능력이 향상되었고, 다음 내용이 포함되었지만 이것에만 국한되진 않습니다:

동적으로 테마 변경；
여러개의 테마；
일부 컴포넌트에서의 테마 변수 커스터마이징；
...

기본적 사용법

5.0 버전에서 테마에 영향을 미치는 가장 작은 엘리먼트를 디자인 토큰이라고 부릅니다. 디자인토큰을 수정하여, 다양한 테마나 컴포넌트를 구현할 수 있습니다. ConfigProvider에 theme를 전달하여 테마를 커스터마이징 할 수 있습니다. V5로 마이그레이션 한 후에는 V5테마가 기본적으로 적용될 것입니다.

WARNING

ConfigProvider는 message.xxx, Modal.xxx, notification.xxx,와 같은 정적 메서드에는 적용되지 않습니다. antd가 이러한 메서드들을 리액트 속성인 ReactDOM.render를 통해 동적으로 새로운 React엔티티로 생성하기 때문입니다. 이러한 컨텍스트는 현재 코드의 컨텍스트와 동일하지 않으므로 컨텍스트 정보를 얻을 수 없습니다.

컨텍스트 정보가 필요하다면 (ConfigProvider에 의해 구성된 컨텐트와 같은), Modal.useModal메서드를 사용하여 모달 속성과 컨텍스트홀더 노드를 리턴 할 수 있습니다. 컨텍스트를 얻고자 하는 곳에 삽입하거나, 모달을 사용하는 것의 문제를 단순화 하기 위해 앱 컴포넌트를 사용하거나, 수동으로 컨텍스트 홀더를 주입해야할 수도 있습니다.

디자인토큰 커스터마이징 하기

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,

        // 별칭(Alias) 토큰 (Alias Token)
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

현재 알고리즘 사용하기

다양한 스타일의 테마는 algorithm을 수정함으로써 빠르게 생성될 수 있습니다. Ant Design 5.0은 세가지의 프리셋 알고리즘을 기본적으로 제공합니다:

기본 알고리즘(default algorithm) theme.defaultAlgorithm
다크 알고리즘(dark algorithm) theme.darkAlgorithm
소형 알고리즘(compact algorithm) theme.compactAlgorithm

ConfigProvider에서 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

컴포넌트 토큰 커스터마이징

디자인토큰에 추가적으로 각 컴포넌트는 컴포넌트 스타일 커스터마이징 호환성을 가지기 위해 자신의 컴포넌트 토큰 또한 가지고 있습니다. 그리고 각각의 컴포넌트는 다른 컴포넌트에 영향을 미치지 않습니다. 이와 비슷하게 컴포넌트의 디자인토큰은 다음 방식으로 재정의 될 수 있습니다.

Algorithm

기본적으로 모든 컴포넌트 토큰은 글로벌 토큰만 재정의할 수 있으며 시드 토큰으로부터 파생되지 않습니다.

>= 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 }}>Enable algorithm: </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 }}>Disable algorithm: </div>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
  </>
);

export default App;

Open Sandbox

모션 비활성화

antd는 기업레벨(enterprise-level)페이지를 더욱 디테일하게 만들기 위해 빌트인 인터렉션 애니메이션을 가지고 있습니다. 일부 극단적인 시나리오에서 페이지 인터렉션 퍼포먼스에 영향을 줄 수 있습니다. 만약 애니메이션을 끄고 싶다면 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를 중첩하여 페이지의 특정 영역을 지역 테마로 적용할 수 있습니다. 자식 테마에서 변경되지 않은 디자인토큰은 부모 테마에서 상속될 것입니다.

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

디자인 토큰 사용하기

현재 테마에서 디자인 토큰을 사용하려면 useToken훅을 통해 디자인 토큰 값을 가져올 수 있습니다.

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,
      }}
    >
      Consume Design Token
    </div>
  );
};

export default App;

Open Sandbox

정적 소비 (예: 적게)

리액트 라이프 사이클 외부에서 토큰이 필요하다면, 정적 함수를 사용하여 얻을 수 있습니다:

import { theme } from 'antd';

const { getDesignToken } = theme;

const globalToken = getDesignToken();

ConfigProvider와 동일하게 getDesignToken도 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',
  },
};

// 정적 함수
const globalToken = getDesignToken(config);

// 훅을 사용하여
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변수로 변경을 위한 컨버트 함수를 제공합니다. 상세 내용이 필요하다면 이것을 읽어보세요

테마 에디터

사용자가 테마 디버깅을 돕기 위해 도구를 제공하고 있습니다: 테마 에디터

원하는 테마에 맞게 이 도구를 사용하여 자유롭게 디자인 토큰을 수정할 수 있습니다.

디자인 토큰

디자인 토큰에서는 디자인에 더 적합한 3계층 구조를 제공하며, 이는 시드 토큰, 맵 토큰, 별칭 토큰으로 구성됩니다. 이 세 가지 토큰 세트는 단순한 그룹이 아닌 시드 토큰이 맵 토큰에서 파생되고, 맵 토큰이 별칭(Alias) 토큰에서 파생되는 3계층 파생 관계입니다. 대부분의 경우 시드 토큰은 테마 커스터마이징에 충분하지만, 더 높은 수준의 테마 커스터마이징이 필요한 경우 디자인 토큰의 라이프사이클을 이해해야 합니다.

디자인 토큰에서는 디자인 토큰을 시드토큰, 맵토큰, 별칭(Alias) 토큰으로 구분하여 보다 디자인 친화적인 3계층 구조를 제공합니다.이 세 가지 그룹의 토큰은 단순한 그룹화가 아니라, 시드 토큰은 맵 토큰에서 파생되고, 맵 토큰이 별칭(Alias) 토큰에서 파생되는 3계층 파생관계입니다. 대부분의 경우 시드 토큰을 사용하는 것은 커스텀 테마에서 충분합니다. 만약 더 높은 수준의 테마 커스터마이징이 필요하다면 antd의 디자인토큰 라이프 사이클을 이해해야 합니다.

디자인 토큰의 진화과정

시드 토큰

시드 토큰은 모든 디자인 의도의 근원을 의미합니다. 예를들어, colorPrimary를 변경함으로써 테마 색상을 변경할 수 있으며, antd 내부 알고리즘이 시드토큰을 기반으로 연관된 색상들을 자동으로 계산하고 적용합니다:

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

맵 토큰

맵토큰은 시드에서 파생된 그라데이션 변수입니다. theme.algorithm를 활용해 커스텀 맵토큰을 주입하는것이 좋습니다. 이것은 맵토큰과의 그라데이션 관계를 보장할 수 있습니다. 일부 맵토큰을 개별적으로 수정하기 위해 theme.token에 의해 재정의 될 수 있습니다.

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

별칭(Alias) 토큰

별칭(Alias) 토큰은 일부 공통 컴포넌트, 기본적으로 맵 토큰 별칭 또는 특수 처리된 맵 토큰의 스타일을 일괄적으로 제어하는 데 사용됩니다.

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

알고리즘

기본 알고리즘은 기본 색상의 그라디언트 색상 팔레트를 계산하는 것과 같은 것이나 기본 둥근 모서리에서의 둥근 모서리의 다양한 사이즈를 계산하는 것과 같은 맵 토큰 내에 시드 토큰을 확장하기 위해 사용됩니다. 알고리즘은 낱개 또는 어떤 혼합으로서 사용될 수 있습니다. 예를들어 다크와 소형 알고리즘은 다크와 소형 테마를 얻기 위해 합성될 수 있습니다.

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

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

API

테마

속성	설명	타입	기본값
토큰	디자인 토큰 수정	`AliasToken`	-
상속	상위 ConfigProvider에 구성되어있는 테마 상속	boolean	true
알고리즘	테마 알고리즘 수정	`(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]`	`defaultAlgorithm`
컴포넌트	컴포넌트에 적용된 컴포넌트 토큰과 별칭(Alias)토큰 수정	`ComponentsConfig`	-
css변수	CSS변수 토글을 위해 CSS 변수를 참조	`boolean \| { prefix?: string; key?: string }`	false
해시	컴포넌트 클래스 해시 값 CSS Variables 참조	boolean	true

컴포넌트 구성

프로퍼티	설명	타입	기본값
`Component` (antd의 `Button`과 같은 모든 컴포넌트 이름이 될 수 있음)	컴포넌트 토큰 수정하기 혹은 별칭(Alias) 토큰 재정의 하기	`ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}`	-

컴포넌트의 algorithm은 기본값이 false입니다. 이는 컴포넌트 토큰만 전역 토큰을 재정의 한다는 의미입니다. true로 설정되면, 알고리즘은 전역 알고리즘과 동일하게 작동 될 것입니다. 알고리즘 또는 알고리즘 배열을 전달할 수 있습니다. 이것은 전역 알고리즘을 재정의 합니다.

시드토큰

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

맵토큰

모든 시드토큰 프로퍼티 상속

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

별칭(Alias)토큰

모든 시드토큰과 맵토큰 프로퍼티 상속

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

왜 `undefined`에서 어떤 객체로 `theme`가 변경될때 혹은 어떤 객체에서 `theme`로 변경될 때 컴포넌트가 재 마운트 되나요?

ConfigProvider에서 DesignTokenContext을 통해 컨텍스트를 전달합니다. theme 가 undefined일 때, 프로바이더 계층은 설정되지 않습니다. 즉 React VirtualDOM 구조는 처음부터 변경되거나 존재하는 것에서 존재하지 않는것으로 변경되어 컴포넌트의 재 마운트를 야기합니다. 해결방법: undefined를 빈 객체 {}로 대체하세요.

동적으로 테마 변경；
여러개의 테마；
일부 컴포넌트에서의 테마 변수 커스터마이징；
...

기본적 사용법

WARNING

디자인토큰 커스터마이징 하기

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

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        // 시드 토큰 (Seed Token)
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // 별칭(Alias) 토큰 (Alias Token)
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Open Sandbox

현재 알고리즘 사용하기

다양한 스타일의 테마는 algorithm을 수정함으로써 빠르게 생성될 수 있습니다. Ant Design 5.0은 세가지의 프리셋 알고리즘을 기본적으로 제공합니다:

기본 알고리즘(default algorithm) theme.defaultAlgorithm
다크 알고리즘(dark algorithm) theme.darkAlgorithm
소형 알고리즘(compact algorithm) theme.compactAlgorithm

ConfigProvider에서 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

컴포넌트 토큰 커스터마이징

Algorithm

기본적으로 모든 컴포넌트 토큰은 글로벌 토큰만 재정의할 수 있으며 시드 토큰으로부터 파생되지 않습니다.

>= 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 }}>Enable algorithm: </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 }}>Disable algorithm: </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

중첩 테마

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

디자인 토큰 사용하기

현재 테마에서 디자인 토큰을 사용하려면 useToken훅을 통해 디자인 토큰 값을 가져올 수 있습니다.

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,
      }}
    >
      Consume Design Token
    </div>
  );
};

export default App;

Open Sandbox

정적 소비 (예: 적게)

리액트 라이프 사이클 외부에서 토큰이 필요하다면, 정적 함수를 사용하여 얻을 수 있습니다:

import { theme } from 'antd';

const { getDesignToken } = theme;

const globalToken = getDesignToken();

ConfigProvider와 동일하게 getDesignToken도 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',
  },
};

// 정적 함수
const globalToken = getDesignToken(config);

// 훅을 사용하여
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변수로 변경을 위한 컨버트 함수를 제공합니다. 상세 내용이 필요하다면 이것을 읽어보세요

테마 에디터

사용자가 테마 디버깅을 돕기 위해 도구를 제공하고 있습니다: 테마 에디터

원하는 테마에 맞게 이 도구를 사용하여 자유롭게 디자인 토큰을 수정할 수 있습니다.

디자인 토큰

디자인 토큰의 진화과정

시드 토큰

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

맵 토큰

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

별칭(Alias) 토큰

별칭(Alias) 토큰은 일부 공통 컴포넌트, 기본적으로 맵 토큰 별칭 또는 특수 처리된 맵 토큰의 스타일을 일괄적으로 제어하는 데 사용됩니다.

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

알고리즘

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

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

API

테마

속성	설명	타입	기본값
토큰	디자인 토큰 수정	`AliasToken`	-
상속	상위 ConfigProvider에 구성되어있는 테마 상속	boolean	true
알고리즘	테마 알고리즘 수정	`(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]`	`defaultAlgorithm`
컴포넌트	컴포넌트에 적용된 컴포넌트 토큰과 별칭(Alias)토큰 수정	`ComponentsConfig`	-
css변수	CSS변수 토글을 위해 CSS 변수를 참조	`boolean \| { prefix?: string; key?: string }`	false
해시	컴포넌트 클래스 해시 값 CSS Variables 참조	boolean	true

컴포넌트 구성

프로퍼티	설명	타입	기본값
`Component` (antd의 `Button`과 같은 모든 컴포넌트 이름이 될 수 있음)	컴포넌트 토큰 수정하기 혹은 별칭(Alias) 토큰 재정의 하기	`ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}`	-

컴포넌트의 algorithm은 기본값이 false입니다. 이는 컴포넌트 토큰만 전역 토큰을 재정의 한다는 의미입니다. true로 설정되면, 알고리즘은 전역 알고리즘과 동일하게 작동 될 것입니다. 알고리즘 또는 알고리즘 배열을 전달할 수 있습니다. 이것은 전역 알고리즘을 재정의 합니다.

시드토큰

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

맵토큰

모든 시드토큰 프로퍼티 상속

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

별칭(Alias)토큰

모든 시드토큰과 맵토큰 프로퍼티 상속

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

테마 커스터마이징

테마 커스터마이징

기본적 사용법

디자인토큰 커스터마이징 하기

현재 알고리즘 사용하기

컴포넌트 토큰 커스터마이징

모션 비활성화

고급 기능

동적 테마 전환

중첩 테마

디자인 토큰 사용하기

정적 소비 (예: 적게)

테마 에디터

디자인 토큰

디자인 토큰의 진화과정

시드 토큰

맵 토큰

별칭(Alias) 토큰

알고리즘

API

테마

컴포넌트 구성

시드토큰

맵토큰

별칭(Alias)토큰

FAQ

왜 undefined에서 어떤 객체로 theme가 변경될때 혹은 어떤 객체에서 theme로 변경될 때 컴포넌트가 재 마운트 되나요?

기본적 사용법

디자인토큰 커스터마이징 하기

현재 알고리즘 사용하기

컴포넌트 토큰 커스터마이징

모션 비활성화

고급 기능

동적 테마 전환

중첩 테마

디자인 토큰 사용하기

정적 소비 (예: 적게)

테마 에디터

디자인 토큰

디자인 토큰의 진화과정

시드 토큰

맵 토큰

별칭(Alias) 토큰

알고리즘

API

테마

컴포넌트 구성

시드토큰

맵토큰

별칭(Alias)토큰

FAQ

왜 undefined에서 어떤 객체로 theme가 변경될때 혹은 어떤 객체에서 theme로 변경될 때 컴포넌트가 재 마운트 되나요?

왜 `undefined`에서 어떤 객체로 `theme`가 변경될때 혹은 어떤 객체에서 `theme`로 변경될 때 컴포넌트가 재 마운트 되나요?

왜 `undefined`에서 어떤 객체로 `theme`가 변경될때 혹은 어떤 객체에서 `theme`로 변경될 때 컴포넌트가 재 마운트 되나요?