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

The following config keys set common props for corresponding components or global effects. See the related APIs for details:

• affix: Affix (supported since 6.0.0)
• alert: Alert (supported since 5.7.0)
• anchor: Anchor (supported since 6.0.0)
• app: App (supported since 6.3.0)
• avatar: Avatar (supported since 5.7.0)
• badge: Badge (supported since 5.7.0)
• borderBeam: BorderBeam (supported since 6.4.0)
• breadcrumb: Breadcrumb (supported since 5.7.0)
• button: Button (supported since 5.6.0)
• card: Card (supported since 5.14.0)
• cardMeta: Card.Meta (supported since 6.0.0)
• calendar: Calendar (supported since 6.0.0)
• carousel: Carousel (supported since 5.7.0)
• cascader: Cascader (supported since 5.13.0)
• checkbox: Checkbox (supported since 6.0.0)
• collapse: Collapse (supported since 5.15.0)
• colorPicker: ColorPicker (supported since 6.3.0)
• datePicker: DatePicker (supported since 5.7.0)
• rangePicker: RangePicker (supported since 5.11.0)
• descriptions: Descriptions (supported since 5.23.0)
• divider: Divider (supported since 5.10.0)
• drawer: Drawer (supported since 5.10.0)
• dropdown: Dropdown (supported since 5.11.0)
• empty: Empty (supported since 5.23.0)
• flex: Flex (supported since 5.10.0)
• floatButton: FloatButton (supported since 6.0.0)
• floatButtonGroup: FloatButton.Group (supported since 5.16.0)
• form: Form (supported since 4.8.0)
• image: Image (supported since 5.14.0)
• input: Input (supported since 4.2.0)
• inputNumber: InputNumber (supported since 5.19.0)
• otp: Input.OTP (supported since 6.0.0)
• inputPassword: Input.Password (supported since 6.4.0)
• inputSearch: Input.Search (supported since 6.4.0)
• textArea: Input.TextArea (supported since 5.15.0)
• layout: Layout (supported since 5.7.0)
• list: List (supported since 5.7.0)
• masonry: Masonry (supported since 6.0.0)
• menu: Menu (supported since 5.15.0)
• mentions: Mentions (supported since 5.13.0)
• message: Message (supported since 5.7.0)
• modal: Modal (supported since 5.10.0)
• notification: Notification (supported since 5.14.0)
• pagination: Pagination (supported since 6.0.0)
• progress: Progress (supported since 5.7.0)
• radio: Radio (supported since 6.0.0)
• rate: Rate (supported since 5.7.0)
• result: Result (supported since 6.0.0)
• ribbon: Badge.Ribbon (supported since 6.0.0)
• skeleton: Skeleton (supported since 6.0.0)
• segmented: Segmented (supported since 6.0.0)
• select: Select (supported since 5.13.0)
• slider: Slider (supported since 5.23.0)
• switch: Switch (supported since 6.0.0)
• space: Space (supported since 5.6.0)
• splitter: Splitter (supported since 5.21.0)
• spin: Spin (supported since 5.20.0)
• statistic: Statistic (supported since 6.0.0)
• steps: Steps (supported since 5.10.0)
• table: Table (supported since 6.2.0)
• tabs: Tabs (supported since 5.14.0)
• tag: Tag (supported since 5.14.0)
• timeline: Timeline (supported since 6.0.0)
• timePicker: TimePicker (supported since 5.13.0)
• tour: Tour (supported since 5.14.0)
• tooltip: Tooltip (supported since 6.1.0)
• popover: Popover (supported since 5.23.0)
• popconfirm: Popconfirm (supported since 5.23.0)
• qrcode: QRCode (supported since 6.0.0)
• transfer: Transfer (supported since 5.7.0)
• tree: Tree (supported since 6.0.0)
• treeSelect: TreeSelect (supported since 5.19.0)
• typography: Typography (supported since 6.4.0)
• upload: Upload (supported since 5.27.0)
• watermark: Watermark (supported since 6.0.0)
• wave: WaveConfig (supported since 5.8.0)

WaveConfig

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' })