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

// ...

export default () => (
  <ConfigProvider direction="rtl">
    <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 }	-
direction	Set direction of layout. See demo	ltr | rtl	ltr
dropdownMatchSelectWidth	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	-	4.3.0
form	Set Form common props	{ validateMessages?: ValidateMessages, requiredMark?: boolean | optional }	-	requiredMark: 4.8.0
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
iconPrefixCls	Set icon prefix className (cooperated with @iconfont-css-prefix)	string	anticon	4.11.0
input	Set Input common props	{ autoComplete?: string }	-	4.2.0
locale	Language package setting, you can find the packages in antd/lib/locale	object	-
pageHeader	Unify the ghost of PageHeader, ref PageHeader	{ ghost: boolean }	true
prefixCls	Set prefix className (cooperated with @ant-prefix)	string	ant
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-
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

ConfigProvider.config() 4.13.0+

Setting Modal、Message、Notification rootPrefixCls.

ConfigProvider.config({
  prefixCls: 'ant', // 4.13.0+
  iconPrefixCls: 'anticon', // 4.17.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>