Importimport { ConfigProvider } from 'antd';
Docs
contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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.
importReactfrom'react';import{ConfigProvider}from'antd';// ...constDemo:React.FC=()=>(<ConfigProviderdirection="rtl"><App/></ConfigProvider>);exportdefaultDemo;
Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:
<ConfigProvidercsp={{ 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 | 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 | (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 |
Setting Modal, Message, Notification static config. 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 | middle | large | - | 5.3.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| affix | Set Affix common props | { className?: string, style?: React.CSSProperties } | - | 6.0.0 |
| alert | Set Alert common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties, classNames?: AnchorStyleConfig["classNames"], styles?: AnchorStyleConfig["styles"] } | - | 5.7.0 , classNames and styles: 6.0.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?: BadgeProps["classNames"], styles?: BadgeProps["styles"] } | - | 5.7.0 |
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties, classNames?: BreadcrumbConfig["classNames"], styles?: BreadcrumbConfig["styles"], separator?: ReactNode } | - | 5.7.0, classNames, separator and styles: 6.0.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: ButtonProps["classNames"], styles?: ButtonProps["styles"], autoInsertSpace?: boolean, variant?: ButtonVariantType, color?: ButtonColorType, shape?: ButtonProps["shape"] } | - | 5.6.0, autoInsertSpace: 5.17.0, variant and color: 5.25.0, shape: 5.27.0 |
| card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: CardProps["classNames"], styles?: CardProps["styles"] } | - | 5.7.0, classNames and styles: 5.14.0 |
| cardMeta | Set Card.Meta common props | { className?: string, style?: React.CSSProperties, classNames?: CardMetaProps["classNames"], styles?: CardMetaProps["styles"] } | - | 6.0.0 |
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties, classNames?: CalendarConfig["classNames"], styles?: CalendarConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.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, classNames?: CheckboxConfig["classNames"], styles?: CheckboxConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode, classNames?: CollapseProps["classNames"], styles?: CollapseProps["styles"] } | - | 5.7.0, expandIcon: 5.15.0, classNames and styles: 6.0.0 |
| colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties, classNames?: ColorPickerConfig["classNames"], styles?: ColorPickerConfig["styles"] } | - | 5.7.0 |
| datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties, classNames?: DatePickerConfig["classNames"], styles?: DatePickerConfig["styles"] } | - | 5.7.0 |
| rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties, classNames?: DescriptionsProps["classNames"], styles?: DescriptionsProps["styles"] } | - | 5.7.0, classNames and styles: 5.23.0 |
| divider | Set Divider common props | { className?: string, style?: React.CSSProperties, classNames?: DividerProps["classNames"], styles?: DividerProps["styles"] } | - | |
| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: DrawerProps["classNames"], styles?: DrawerProps["styles"], closeIcon?: ReactNode, closable?: DrawerProps["closable"] } | - | 5.7.0, classNames and styles: 5.10.0, closeIcon: 5.14.0 |
| dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties, classNames?: DropdownConfig["classNames"], styles?: DropdownConfig["styles"] } | - | |
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties, classNames?: EmptyProps["classNames"], styles?: EmptyProps["styles"], image?: ReactNode } | - | 5.7.0, classNames and styles: 5.23.0, image: 5.27.0 |
| flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
| floatButton | Set FloatButton common props | { className?: string, style?: React.CSSProperties, classNames?: FloatButtonProps["classNames"], styles?: FloatButtonProps["styles"], backTopIcon?: React.ReactNode } | - | |
| floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: FloatButtonProps["classNames"], styles?: FloatButtonProps["styles"] } | - | |
| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: ValidateMessages, requiredMark?: boolean | optional, scrollToFirstError?: boolean | Options, classNames?:FormConfig["classNames"], styles?: FormConfig["styles"] } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className and style: 5.7.0 |
| image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode, classNames?:ImageConfig["classNames"], styles?: ImageConfig["styles"] }, fallback?: string } | - | 5.7.0, closeIcon: 5.14.0, classNames and styles: 6.0.0 |
| input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean | { clearIcon?: ReactNode } } | - | 4.2.0, allowClear: 5.15.0 |
| inputNumber | Set InputNumber common props | { className?: string, style?: React.CSSProperties, classNames?: InputNumberConfig["classNames"], styles?: InputNumberConfig["styles"] } | - | |
| otp | Set OTP common props | { className?: string, style?: React.CSSProperties, classNames?: OTPConfig["classNames"], styles?: OTPConfig["styles"] } | - | |
| inputSearch | Set Search common props | { className?: string, style?: React.CSSProperties, classNames?: InputSearchConfig["classNames"], styles?: InputSearchConfig["styles"] } | - | |
| textArea | Set TextArea common props | { autoComplete?: string, className?: string, style?: React.CSSProperties,classNames?:TextAreaConfig["classNames"], styles?: TextAreaConfig["styles"], allowClear?: boolean | { clearIcon?: ReactNode } } | - | 5.15.0 |
| layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| list | Set List common props | { className?: string, style?: React.CSSProperties, item?:{ classNames: ListItemProps["classNames"], styles: ListItemProps["styles"] } } | - | 5.7.0 |
| masonry | Set Masonry common props | { className?: string, style?: React.CSSProperties, classNames?: MasonryProps["classNames"], styles?: MasonryProps["styles"] } | - | |
| menu | Set Menu common props | { className?: string, style?: React.CSSProperties, expandIcon?: ReactNode | props => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 |
| mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties, classNames?:MentionsConfig["classNames"], styles?: MentionsConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| message | Set Message common props | { className?: string, style?: React.CSSProperties, classNames?: MessageConfig["classNames"], styles?: MessageConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: ModalProps["classNames"], styles?: ModalProps["styles"], closeIcon?: React.ReactNode } | - | 5.7.0, classNames and styles: 5.10.0, closeIcon: 5.14.0 |
| notification | Set Notification common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode, classNames?: NotificationConfig["classNames"], styles?: NotificationConfig["styles"] } | - | 5.7.0, closeIcon: 5.14.0, classNames and styles: 6.0.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties,classNames?:PaginationConfig["classNames"], styles?: PaginationConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| progress | Set Progress common props | { className?: string, style?: React.CSSProperties, classNames?: ProgressConfig["classNames"], styles?: ProgressConfig["styles"] } | - | |
| radio | Set Radio common props | { className?: string, style?: React.CSSProperties, classNames?: RadioConfig["classNames"], styles?: RadioConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| result | Set Result common props | { className?: string, style?: React.CSSProperties , classNames?: ResultProps["classNames"], styles?: ResultProps["styles"]} | - | 5.7.0, classNames and styles: 6.0.0 |
| ribbon | Set Ribbon common props | { className?: string, style?: React.CSSProperties, , classNames?: RibbonProps["classNames"], styles?: RibbonProps["styles"] } | - | 6.0.0 |
| skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties, classNames?: SkeletonProps["classNames"], styles?: SkeletonProps["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties, classNames?: SegmentedProps["classNames"], styles?: SegmentedProps["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties, classNames?: SelectConfig["classNames"], styles?: SelectConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties, classNames?: SliderProps["classNames"], styles?: SliderProps["styles"] } | - | 5.7.0, classNames and styles: 5.23.0 |
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties, classNames?: SwitchStyleConfig["classNames"], styles?: SwitchStyleConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| space | Set Space common props, ref Space | { size: small | middle | large | number, className?: string, style?: React.CSSProperties, classNames?: SpaceProps["classNames"], styles?: SpaceProps["styles"] } | - | 5.6.0 |
| splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties, classNames?:Splitter["classNames"], styles?: Splitter["styles"] } | - | 5.21.0 |
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement, classNames?:SpinConfig["classNames"], styles?: SpinConfig["styles"] } | - | 5.7.0, indicator: 5.20.0, classNames and styles: 6.0.0 |
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties, classNames?: StatisticProps["classNames"], styles?: StatisticProps["styles"]} | - | 5.7.0, classNames and styles: 6.0.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties, classNames?:StepsConfig["classNames"], styles?: StepsConfig["styles"] } | - | |
| table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode }, classNames?: TableProps["classNames"], styles?: TableProps["styles"] } | - | |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: start | center | end }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode, classNames?: TabsConfig["classNames"], styles?: TabsConfig["styles"] } | - | 5.7.0, moreIcon and addIcon: 5.14.0, removeIcon: 5.15.0, classNames and styles: 6.0.0 |
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode, classNames?: TagProps["classNames"], styles?: TagProps["styles"] } | - | 5.7.0, closeIcon: 5.14.0, classNames and styles: 6.0.0 |
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties, classNames?: TimelineConfig["classNames"], styles?: TimelineConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties, classNames?: TimePickerConfig["classNames"], styles?: TimePickerConfig["styles"] } | - | 5.7.0 |
| tour | Set Tour common props | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: TourProps["classNames"], styles?: TourProps["styles"] } | - | 5.14.0, classNames、styles、className、style: 6.0.0 |
| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:Tooltip["classNames"], styles?: Tooltip["styles"], arrow: boolean | { pointAtCenter: boolean }, unique?: boolean, trigger?: Tooltip["trigger"] } | - | |
| popover | Set Popover common props | { className?: string, style?: React.CSSProperties, classNames?:Popover["classNames"], styles?: Popover["styles"], arrow: boolean | { pointAtCenter: boolean }, trigger?: Popover["trigger"]} | - | 5.23.0, arrow: 6.0.0, trigger: 6.1.0 |
| popconfirm | Set Popconfirm common props | { className?: string, style?: React.CSSProperties, classNames?:Popconfirm["classNames"], styles?: Popconfirm["styles"], arrow: boolean | { pointAtCenter: boolean }, trigger?: Popconfirm["trigger"]} | - | 5.23.0, arrow: 6.0.0, trigger: 6.1.0 |
| qrcode | Set QRCode common props | { className?: string, style?: React.CSSProperties, classNames?:QRCode["classNames"], styles?: QRCode["styles"] } | - | |
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, classNames?: TransferConfig["classNames"], styles?: TransferConfig["styles"], selectionsIcon?: React.ReactNode } | - | |
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties, classNames?: TreeConfig["classNames"], styles?: TreeConfig["styles"] } | - | 5.7.0, classNames and styles: 6.0.0 |
| treeSelect | Set TreeSelect common props | { className?: string, style?: React.CSSProperties, classNames?: TreeSelectConfig["classNames"], styles?: TreeSelectConfig["styles"], switcherIcon?: TreeSelect["switcherIcon"]} | - | |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| upload | Set Upload common props | { className?: string, style?: React.CSSProperties, classNames?:UploadConfig["classNames"], styles?: UploadConfig["styles"], customRequest?: Upload["customRequest"] } | - | 5.7.0, customRequest: 5.27.0, classNames and styles: 6.0.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.
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' })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.
Use holderRender to set the Provider for the static methods message,modal,notification.
* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)
