ConfigProvider
ConfigProvider
Importimport { ConfigProvider } from 'antd'; |
Importimport { ConfigProvider } from 'antd'; |
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;
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 |
|---|---|---|---|---|
| componentDisabled | Config antd component disabled | boolean | - | 4.21.0 |
| componentSize | Config antd component size | small | medium | 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 | (trigger?: HTMLElement) => HTMLElement | ShadowRoot | () => document.body | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | Window | ShadowRoot | () => 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 | Theme | - | 5.0.0 |
| variant | Set variant of data entry components | outlined | filled | borderless | - | 5.19.0 |
| virtual | Disable virtual scroll when set to false | boolean | - | 4.3.0 |
| warning | Config warning level, when strict is false, it will aggregate deprecated information into a single message | { strict: boolean } | - | 5.10.0 |
Button auto spacing config, please use button={{ autoInsertSpace: boolean }} instead | boolean | - | - | |
Determine whether the dropdown menu and the select input are the same width, please use popupMatchSelectWidth instead | boolean | - | - |
Setting Modal, Message, Notification static config. Does not work on hooks.
ConfigProvider.config({// 5.13.0+holderRender: (children) => (<ConfigProviderprefixCls="ant"iconPrefixCls="anticon"theme={{ token: { colorPrimary: 'red' } }}>{children}</ConfigProvider>),});
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 | medium | large | - | 5.3.0 |
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)| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| disabled | Whether to disable wave effect | boolean | false | |
| showEffect | Customized wave effect | (node: HTMLElement, info: { className, token, component }) => void | - | |
| triggerType | The event that triggers wave effect | click | pointerdown | pointerup | mousedown | mouseup | click | 6.4.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.
prefixCls priority(The former is covered by the latter)ConfigProvider.config({ prefixCls: 'prefix-1' })ConfigProvider.config({ holderRender: (children) => <ConfigProvider prefixCls="prefix-2">{children}</ConfigProvider> })message.config({ prefixCls: 'prefix-3' })* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)
