logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

ConfigProvider
全局化配置

为组件提供统一的全局化配置。
使用import { ConfigProvider } from "antd";
源码components/config-provider
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

使用

ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

tsx
import React from 'react';
import { ConfigProvider } from 'antd';
// ...
const Demo: React.FC = () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
export default Demo;

内容安全策略(CSP)

部分组件为了支持波纹效果,使用了动态样式。如果开启了 Content Security Policy (CSP),你可以通过 csp 属性来进行配置:

tsx
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>

代码演示

Change locale of components:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
Click to confirm
0 item
No data
No data
0 item
No data
No data
2025
May
SuMoTuWeThFrSa
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
Name
Age
No data
No data

QR code expired

Preview
image.pngimage.png
Uploading...
image.png
image.png
Tour
国际化

此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Change direction of components:
Cascader example
یک مورد انتخاب کنید
    With search:  
Select an item

Switch example
      
Radio Group example

Button example

Tree example
parent 1
parent 1-0
leaf
leaf
parent 1-1
sss

Input (Input Group) example


Option1



Http://
.com

Select example
مورچه
 
مورچه
مورچه
Select a person
TreeSelect example
Please select

Modal example

Steps example
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.

1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.

Rate example

* Note: Half star not implemented in RTL direction, it will be supported after rc-rate implement rtl support.
Badge example
5


Pagination example
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页

Grid System example

* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)

col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
col-18 col-push-6
col-6 col-pull-18
方向

这里列出了支持 rtl 方向的组件,您可以在演示中切换方向。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
demo
Card
NameAge
John Brown32
Jim Green42
Joe Black32
  • 1
组件尺寸

修改默认组件尺寸。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
主题

通过 theme 修改主题。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义波纹

波纹效果带来了灵动性,可以通过 component 判断来自哪个组件。你也可以使用 @ant-design/happy-work-theme 提供的 HappyProvider 实现动态波纹效果。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
静态方法

使用 holderRender 给 message 、modal 、notification 静态方法设置 Provider

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

API

参数说明类型默认值版本
componentDisabled设置 antd 组件禁用状态boolean-4.21.0
componentSize设置 antd 组件大小small | middle | large-
csp设置 Content Security Policy 配置{ nonce: string }-
direction设置文本展示方向。 示例ltr | rtlltr
getPopupContainer弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。function(triggerNode)() => document.body
getTargetContainer配置 Affix、Anchor 滚动监听容器。() => HTMLElement() => window4.2.0
iconPrefixCls设置图标统一样式前缀stringanticon4.11.0
locale语言包配置,语言包可到 antd/locale 目录下寻找object-
popupMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | number-5.5.0
popupOverflowSelect 类组件弹层展示逻辑,默认为可视区域滚动,可配置成滚动区域滚动'viewport' | 'scroll'
预览
'viewport'5.5.0
prefixCls设置统一样式前缀stringant
renderEmpty自定义组件空状态。参考 空状态function(componentName: string): ReactNode-
theme设置主题,参考 定制主题Theme-5.0.0
variant设置全局输入组件形态变体outlined | filled | borderless-5.19.0
virtual设置 false 时关闭虚拟滚动boolean-4.3.0
warning设置警告等级,strict 为 false 时会将废弃相关信息聚合为单条信息{ strict: boolean }-5.10.0

ConfigProvider.config()

设置 Modal、Message、Notification 静态方法配置,只会对非 hooks 的静态方法调用生效。

tsx
ConfigProvider.config({
// 5.13.0+
holderRender: (children) => (
<ConfigProvider
prefixCls="ant"
iconPrefixCls="anticon"
theme={{ token: { colorPrimary: 'red' } }}
>
{children}
</ConfigProvider>
),
});

ConfigProvider.useConfig() 5.3.0+

获取父级 Provider 的值,如 DisabledContextProvider、SizeContextProvider。

jsx
const {
componentDisabled, // 5.3.0+
componentSize, // 5.3.0+
} = ConfigProvider.useConfig();
返回值说明类型默认值版本
componentDisabledantd 组件禁用状态boolean-5.3.0
componentSizeantd 组件大小状态small | middle | large-5.3.0

组件配置

参数说明类型默认值版本
alert设置 Alert 组件的通用属性{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
anchor设置 Anchor 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
avatar设置 Avatar 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
badge设置 Badge 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: BadgeProps["classNames"], styles?: BadgeProps["styles"] }-5.7.0
breadcrumb设置 Breadcrumb 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
button设置 Button 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: ButtonProps["classNames"], styles?: ButtonProps["styles"], autoInsertSpace?: boolean, variant?: ButtonVariantType, color?: ButtonColorType }-5.6.0, autoInsertSpace: 5.17.0, variant 和 color: 5.25.0
calendar设置 Calendar 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
card设置 Card 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: CardProps["classNames"], styles?: CardProps["styles"] }-5.7.0, classNames 和 styles: 5.14.0
carousel设置 Carousel 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
cascader设置 Cascader 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: CascaderProps["classNames"], styles?: CascaderProps["styles"] }-5.7.0, classNames 和 styles: 5.25.0
checkbox设置 Checkbox 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
collapse设置 Collapse 组件的通用属性{ className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode }-5.7.0, expandIcon: 5.15.0
colorPicker设置 ColorPicker 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
datePicker设置 DatePicker 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: DatePickerConfig["classNames"], styles?: DatePickerConfig["styles"] }-5.7.0, classNames 和 styles: 5.25.0
rangePicker设置 RangePicker 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.11.0
descriptions设置 Descriptions 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: DescriptionsProps["classNames"], styles?: DescriptionsProps["styles"] }-5.7.0, classNames 和 styles: 5.23.0
divider设置 Divider 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
drawer设置 Drawer 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: DrawerProps["classNames"], styles?: DrawerProps["styles"], closeIcon?: ReactNode }-5.7.0, classNames 和 styles: 5.10.0, closeIcon: 5.14.0
dropdown设置 Dropdown 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.11.0
empty设置 Empty 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?:EmptyProps["classNames"], styles?: EmptyProps["styles"] }-5.7.0, classNames 和 styles: 5.23.0
flex设置 Flex 组件的通用属性{ className?: string, style?: React.CSSProperties, vertical?: boolean }-5.10.0
floatButtonGroup设置 FloatButton.Group 组件的通用属性{ closeIcon?: React.ReactNode }-5.16.0
form设置 Form 组件的通用属性{ className?: string, style?: React.CSSProperties, validateMessages?: ValidateMessages, requiredMark?: boolean | optional, colon?: boolean, scrollToFirstError?: boolean | Options}-requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className 和 style: 5.7.0
image设置 Image 组件的通用属性{ className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } }-5.7.0, closeIcon: 5.14.0
input设置 Input 组件的通用属性{ autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean | { clearIcon?: ReactNode } }-5.7.0, allowClear: 5.15.0
textArea设置 TextArea 组件的通用属性{ autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean | { clearIcon?: ReactNode } }-5.15.0
layout设置 Layout 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
list设置 List 组件的通用属性{ className?: string, style?: React.CSSProperties, item?:{ classNames: ListItemProps["classNames"], styles: ListItemProps["styles"] } }-5.7.0
menu设置 Menu 组件的通用属性{ className?: string, style?: React.CSSProperties, expandIcon?: ReactNode | props => ReactNode }-5.7.0, expandIcon: 5.15.0
mentions设置 Mentions 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
message设置 Message 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
modal设置 Modal 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: ModalProps["classNames"], styles?: ModalProps["styles"], closeIcon?: React.ReactNode }-5.7.0, classNames 和 styles: 5.10.0, closeIcon: 5.14.0
notification设置 Notification 组件的通用属性{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
pagination设置 Pagination 组件的通用属性{ showSizeChanger?: boolean, className?: string, style?: React.CSSProperties }-5.7.0
progress设置 Progress 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
radio设置 Radio 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
rate设置 Rate 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
result设置 Result 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
skeleton设置 Skeleton 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
segmented设置 Segmented 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
select设置 Select 组件的通用属性{ className?: string, showSearch?: boolean, style?: React.CSSProperties, classNames?: SelectProps["classNames"], styles?: SelectProps["styles"] }-5.7.0, classNames 和 styles: 5.25.0
slider设置 Slider 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: SliderProps["classNames"], styles?: SliderProps["styles"] }-5.7.0, classNames 和 styles: 5.23.0
switch设置 Switch 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
space设置 Space 的通用属性,参考 Space{ size: small | middle | large | number, className?: string, style?: React.CSSProperties, classNames?: SpaceProps["classNames"], styles?: SpaceProps["styles"] }-5.6.0
splitter设置 Splitter 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.21.0
spin设置 Spin 组件的通用属性{ className?: string, style?: React.CSSProperties, indicator?: React.ReactElement }-5.7.0, indicator: 5.20.0
statistic设置 Statistic 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
steps设置 Steps 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
table设置 Table 组件的通用属性{ className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } }-5.7.0, expandable: 5.14.0
tabs设置 Tabs 组件的通用属性{ className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: start | center | end }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode }-5.7.0, moreIcon and addIcon: 5.14.0, removeIcon: 5.15.0
tag设置 Tag 组件的通用属性{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
timeline设置 Timeline 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
timePicker设置 TimePicker 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?: TimePickerConfig["classNames"], styles?: TimePickerConfig["styles"] }-5.7.0, classNames 和 styles: 5.25.0
tour设置 Tour 组件的通用属性{ closeIcon?: React.ReactNode }-5.14.0
tooltip设置 Tooltip 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?:Tooltip["classNames"], styles?: Tooltip["styles"] }-5.23.0
popover设置 Popover 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?:Popover["classNames"], styles?: Popover["styles"] }-5.23.0
popconfirm设置 Popconfirm 组件的通用属性{ className?: string, style?: React.CSSProperties, classNames?:Popconfirm["classNames"], styles?: Popconfirm["styles"] }-5.23.0
transfer设置 Transfer 组件的通用属性{ className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode }-5.7.0, selectionsIcon: 5.14.0
tree设置 Tree 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
treeSelect设置 TreeSelect 组件的通用属性{ classNames?:TreeSelect["classNames"], styles?: TreeSelect["styles"] }-5.25.0
typography设置 Typography 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
upload设置 Upload 组件的通用属性{ className?: string, style?: React.CSSProperties }-5.7.0
wave设置水波纹特效{ disabled?: boolean, showEffect?: (node: HTMLElement, info: { className, token, component }) => void }-5.8.0

FAQ

如何增加一个新的语言包?

参考《增加语言包》。

为什么时间类组件的国际化 locale 设置不生效?

参考 FAQ 为什么时间类组件的国际化 locale 设置不生效?。

配置 getPopupContainer 导致 Modal 报错?

相关 issue:https://github.com/ant-design/ant-design/issues/19974

当如下全局设置 getPopupContainer 为触发节点的 parentNode 时,由于 Modal 的用法不存在 triggerNode,这样会导致 triggerNode is undefined 的报错,需要增加一个判断条件。

diff
<ConfigProvider
- getPopupContainer={triggerNode => triggerNode.parentNode}
+ getPopupContainer={node => {
+ if (node) {
+ return node.parentNode;
+ }
+ return document.body;
+ }}
>
<App />
</ConfigProvider>

为什么 message.info、notification.open 或 Modal.confirm 等方法内的 ReactNode 无法继承 ConfigProvider 的属性?比如 prefixCls 和 theme。

静态方法是使用 ReactDOM.render 重新渲染一个 React 根节点上,和主应用的 React 节点是脱离的。我们建议使用 useMessage、useNotification 和 useModal 来使用相关方法。原先的静态方法在 5.0 中已被废弃。

Vite 生产模式打包后国际化 locale 设置不生效?

相关 issue:#39045

由于 Vite 生产模式下打包与开发模式不同,cjs 格式的文件会多一层,需要 zhCN.default 来获取。推荐 Vite 用户直接从 antd/es/locale 目录下引入 esm 格式的 locale 文件。

prefixCls 优先级(前者被后者覆盖)

  1. ConfigProvider.config({ prefixCls: 'prefix-1' })
  2. ConfigProvider.config({ holderRender: (children) => <ConfigProvider prefixCls="prefix-2">{children}</ConfigProvider> })
  3. message.config({ prefixCls: 'prefix-3' })