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

category	group	title	cover	coverDark
Components	Other	ConfigProvider	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original

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';
import React from 'react';

// ...
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

Locale Direction Component size Theme prefixCls useConfig

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
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
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'	'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	-	-	5.0.0
virtual	Disable virtual scroll when set to false	boolean	-	4.3.0

ConfigProvider.config()

Setting Modal、Message、Notification static config. Not work on hooks.

ConfigProvider.config({
  prefixCls: 'ant',
  iconPrefixCls: 'anticon',

  // 5.6.0+
  // Please use hooks version first
  theme: { token: { colorPrimary: 'red' } },
});

ConfigProvider.useConfig() 5.3.0+

Available since 5.2.0. 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 | middle | large	-	5.3.0

Component Config

Property	Description	Type	Default	Version
anchor	Set Anchor common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
avatar	Set Avatar common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
badge	Set Badge common props	{ className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } }	-	5.7.0
breadcrumb	Set Breadcrumb common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
button	Set Button common props	{ className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } }	-	5.6.0
card	Set Card common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
cascader	Set Cascader common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
checkbox	Set Checkbox common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
colorPicker	Set ColorPicker common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
descriptions	Set Descriptions common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
divider	Set Divider common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
empty	Set Empty common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
form	Set Form common props	{ className?: string, style?: React.CSSProperties, validateMessages?: ValidateMessages, requiredMark?: boolean | optional, scrollToFirstError?: boolean | Options }	-	requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0
image	Set Image common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
input	Set Input common props	{ autoComplete?: string, className?: string, style?: React.CSSProperties }	-	4.2.0
layout	Set Layout common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
mentions	Set Mentions common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
message	Set Message common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
modal	Set Modal common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
notification	Set Notification common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
pagination	Set Pagination common props	{ showSizeChanger?: boolean, className?: string, style?: React.CSSProperties }	-	5.7.0
radio	Set Radio common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
rate	Set Rate common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
result	Set Result common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
segmented	Set Segmented common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
select	Set Select common props	{ className?: string, showSearch?: boolean, style?: React.CSSProperties }	-	5.7.0
slider	Set Slider common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
switch	Set Switch common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
space	Set Space common props, ref Space	{ size: small | middle | large | number, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } }	-	5.6.0
spin	Set Spin common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
steps	Set Steps common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
table	Set Table common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
tabs	Set Tabs common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
tag	Set Tag common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
tree	Set Tree common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
typography	Set Typography common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
upload	Set Upload common props	{ className?: string, style?: React.CSSProperties }	-	5.7.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>

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.