ConfigProvider

Provide a uniform configuration support for components.

Usage

This component provides a configuration to all React components underneath itself via the context API. In the render tree all components will have access to the provided config.

import React from 'react';
import { ConfigProvider } from 'antd';

// ...
const Demo: React.FC = () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
);

export default Demo;

Content Security Policy

Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:

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

Examples

API

Property	Description	Type	Default	Version
componentDisabled	Config antd component `disabled`	boolean	-	4.21.0
componentSize	Config antd component size	`small` \| `medium` \| `large`	-
csp	Set Content Security Policy config	{ nonce: string }	-
direction	Set direction of layout. See demo	`ltr` \| `rtl`	`ltr`
getPopupContainer	To set the container of the popup element. The default is to create a `div` element in `body`	`(trigger?: HTMLElement) => HTMLElement \| ShadowRoot`	() => document.body
getTargetContainer	Config Affix, Anchor scroll target container	`() => HTMLElement \| Window \| ShadowRoot`	() => window	4.2.0
iconPrefixCls	Set icon prefix className	string	`anticon`	4.11.0
locale	Language package setting, you can find the packages in antd/locale	object	-
popupMatchSelectWidth	Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll	boolean \| number	-	5.5.0
popupOverflow	Select like component popup logic. Can set to show in viewport or follow window scroll	'viewport' \| 'scroll' Native explanatory image	'viewport'	5.5.0
prefixCls	Set prefix className	string	`ant`
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-
theme	Set theme, ref Customize Theme	Theme	-	5.0.0
variant	Set variant of data entry components	`outlined` \| `filled` \| `borderless`	-	5.19.0
virtual	Disable virtual scroll when set to `false`	boolean	-	4.3.0
warning	Config warning level, when `strict` is `false`, it will aggregate deprecated information into a single message	{ strict: boolean }	-	5.10.0
~~autoInsertSpaceInButton~~	Button auto spacing config, please use `button={{ autoInsertSpace: boolean }}` instead	boolean	-	-
~~dropdownMatchSelectWidth~~	Determine whether the dropdown menu and the select input are the same width, please use `popupMatchSelectWidth` instead	boolean	-	-

ConfigProvider.config()

Setting Modal, Message, Notification static config. Does not work on hooks.

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

ConfigProvider.useConfig() <Badge>5.3.0+</Badge>

Get the value of the parent Provider, Such as DisabledContextProvider, SizeContextProvider.

const {
  componentDisabled, // 5.3.0+
  componentSize, // 5.3.0+
} = ConfigProvider.useConfig();

Property	Description	Type	Default	Version
componentDisabled	antd component disabled state	boolean	-	5.3.0
componentSize	antd component size state	`small` \| `medium` \| `large`	-	5.3.0

Component Config

The following config keys set common props for corresponding components or global effects. See the related APIs for details:

WaveConfig

Property	Description	Type	Default	Version
disabled	Whether to disable wave effect	boolean	false
showEffect	Customized wave effect	(node: HTMLElement, info: { className, token, component }) => void	-
triggerType	The event that triggers wave effect	`click` \| `pointerdown` \| `pointerup` \| `mousedown` \| `mouseup`	`click`	6.4.0

FAQ

How to contribute a new language?

See <Adding new language>.

Date-related components locale is not working?

Modal throw error when setting `getPopupContainer`?

When you config getPopupContainer to parentNode globally, Modal will throw error of triggerNode is undefined because it did not have a triggerNode. You can try the fix below.

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

Why can't ConfigProvider props (like `prefixCls` and `theme`) affect ReactNode inside `message.info`, `notification.open`, `Modal.confirm`?

antd will dynamic create React instance by ReactDOM.render when call message methods. Whose context is different with origin code located context. We recommend useMessage, useNotification and useModal which , the methods came from message/notification/Modal has been deprecated in 5.x.

Locale is not working with Vite in production mode?

Related issue: #39045

In production mode of Vite, default exports from cjs file should be used like this: enUS.default. So you can directly import locale from es/ directory like import enUS from 'antd/es/locale/en_US' to make dev and production have the same behavior.

`prefixCls` priority(The former is covered by the latter)

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

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/config-provider/DisabledContext.tsx
vendor/components/config-provider/MotionWrapper.tsx
vendor/components/config-provider/PropWarning.tsx
vendor/components/config-provider/SizeContext.tsx
vendor/components/config-provider/context.ts
vendor/components/config-provider/defaultRenderEmpty.tsx
vendor/components/config-provider/index.tsx

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.

ConfigProvider

ConfigProvider

Usage

Content Security Policy

Examples

API

ConfigProvider.config()

ConfigProvider.useConfig() <Badge>5.3.0+</Badge>

Component Config

WaveConfig

FAQ

How to contribute a new language?

Date-related components locale is not working?

Modal throw error when setting getPopupContainer?

Why can't ConfigProvider props (like prefixCls and theme) affect ReactNode inside message.info, notification.open, Modal.confirm?

Locale is not working with Vite in production mode?

prefixCls priority(The former is covered by the latter)

Shared native props

Install and reproduce an example

Native type references

Source and license

Modal throw error when setting `getPopupContainer`?

Why can't ConfigProvider props (like `prefixCls` and `theme`) affect ReactNode inside `message.info`, `notification.open`, `Modal.confirm`?

`prefixCls` priority(The former is covered by the latter)