ConfigProvider

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 {#csp}

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

<code src="./demo/locale.tsx">Locale</code> <code src="./demo/direction.tsx">Direction</code> <code src="./demo/size.tsx">Component size</code> <code src="./demo/theme.tsx">Theme</code> <code src="./demo/wave.tsx">Custom Wave</code> <code src="./demo/holderRender.tsx">Static function</code> <code src="./demo/prefixCls.tsx" debug>prefixCls</code> <code src="./demo/useConfig.tsx" debug>useConfig</code> <code src="./demo/warning.tsx" debug>warning</code>

API

ConfigProvider.config() {#config}

Setting Modal, Message, Notification static config. 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> {#useconfig}

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

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

Component Config

FAQ

How to contribute a new language? {#faq-add-locale}

See <Adding new language>.

Date-related components locale is not working? {#faq-locale-not-work}

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

Modal throw error when setting getPopupContainer? {#faq-get-popup-container}

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? {#faq-message-inherit}

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? {#faq-vite-locale-not-work}

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) {#faq-prefixcls-priority}

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