ant-design/components/config-provider/index.en-US.md

category	type	cols	title	cover
Components	Other	1	ConfigProvider	https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg

ConfigProvider provides 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 { ConfigProvider } from 'antd';

// ...

return (
  <ConfigProvider {...yourConfig}>
    <App />
  </ConfigProvider>
);

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>

API

Property	Description	Type	Default	Version
autoInsertSpaceInButton	Set false to remove space between 2 chinese characters on Button	boolean	true
componentSize	Config antd component size	small | middle | large	-
csp	Set Content Security Policy config	{ nonce: string }	-
form	Set Form common props	{ validateMessages?: ValidateMessages }	-
input	Set Input common props	{ autoComplete?: string }	-	4.2.0
renderEmpty	set empty content of components. Ref Empty	Function(componentName: string): ReactNode	-
getPopupContainer	to set the container of the popup element. The default is to create a div element in body.	Function(triggerNode)	() => document.body
getTargetContainer	Config Affix, Anchor scroll target container.	() => HTMLElement	() => window	4.2.0
locale	language package setting, you can find the packages in antd/es/locale	object
prefixCls	set prefix class. Note: This will discard default styles from antd.	string	ant
pageHeader	Unify the ghost of PageHeader, ref PageHeader	{ ghost:boolean }	true
direction	set direction of layout. See demo	ltr | rtl	ltr
space	set Space size, ref Space	{ size: small | middle | large | number }	-	4.1.0
virtual	Disable virtual scroll when set to false	boolean	-	4.3.0
dropdownMatchSelectWidth	Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. false will disable virtual scroll	boolean | number	-	4.3.0

FAQ

How to contribute a new language?

See .

Does the locale problem still exist in DatePicker even if ConfigProvider locale is used?

Please make sure you set moment locale or that you don't have two different versions of moment.

import 'moment/locale/zh-cn';
moment.locale('zh-cn');

Modal throw error when setting getPopupContainer?

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

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>