ConfigProvider provides a uniform configuration support for components.
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;
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>
| 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 |
Setting Modal、Message、Notification static config. Not work on hooks.
ConfigProvider.config({prefixCls: 'ant',iconPrefixCls: 'anticon',// 5.6.0+// Please use hooks version firsttheme: { token: { colorPrimary: 'red' } },});
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 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| alert | Set Alert common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| 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 |
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| carousel | Set Carousel 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 |
| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| datePicker | Set datePicker 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 |
| drawer | Set Drawer 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 |
| list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| menu | Set Menu 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 |
| progress | Set Progress common props | { 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 |
| skeleton | Set Skeleton 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 |
| statistic | Set Statistic 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 |
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| transfer | Set Transfer 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 |
| wave | Config wave effect | { disabled?: boolean, showEffect?: (node: HTMLElement, info: { className, token, component }) => void } | - | 5.8.0 |
See FAQ Date-related-components-locale-is-not-working?
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>
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.
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.
Components which need localization support are listed here, you can toggle the language in the demo.
Components which support rtl direction are listed here, you can toggle the direction in the demo.
Config component default size.
Modify theme by theme prop.
Wave effect brings dynamic. Use component to determine which component use it. You can also use HappyProvider from @ant-design/happy-work-theme to implement dynamic wave effect.
* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)
