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

category	group	title	cover
Components	Other	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>

Examples

Locale Direction Component size Theme prefixCls

API

Property	Description	Type	Default	Version
autoInsertSpaceInButton	Set false to remove space between 2 chinese characters on Button	boolean	true
componentDisabled	Config antd component disabled	boolean	-	4.21.0
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	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/locale	object	-
prefixCls	Set prefix className	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
theme	Set theme, ref Customize Theme	-	-	5.0.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 <Adding new language>.

Date-related components locale is not working?

See FAQ Date-related-components-locale-is-not-working?

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>