2018-11-26 12:06:42 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Other
2018-11-26 12:06:42 +08:00
title: ConfigProvider
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original
2018-11-26 12:06:42 +08:00
---
`ConfigProvider` provides a uniform configuration support for components.
## Usage
2019-11-21 07:39:57 +08:00
This component provides a configuration to all React components underneath itself via the [context API ](https://facebook.github.io/react/docs/context.html ). In the render tree all components will have access to the provided config.
2018-11-26 12:06:42 +08:00
2023-01-19 15:37:54 +08:00
```tsx
import React from 'react';
2023-09-13 11:49:30 +08:00
import { ConfigProvider } from 'antd';
2018-11-26 12:06:42 +08:00
// ...
2023-01-19 15:37:54 +08:00
const Demo: React.FC = () => (
2020-08-03 14:35:11 +08:00
< ConfigProvider direction = "rtl" >
2018-11-26 12:06:42 +08:00
< App / >
< / ConfigProvider >
);
2023-01-19 15:37:54 +08:00
export default Demo;
2018-11-26 12:06:42 +08:00
```
2019-01-09 20:15:37 +08:00
### Content Security Policy
2019-11-21 07:39:57 +08:00
Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
2019-01-09 20:15:37 +08:00
2023-01-19 15:37:54 +08:00
```tsx
2019-01-09 20:15:37 +08:00
< ConfigProvider csp = {{ nonce: ' YourNonceCode ' } } >
< Button > My Button< / Button >
< / ConfigProvider >
```
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< 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 >
2023-07-25 16:29:47 +08:00
< code src = "./demo/wave.tsx" > Custom Wave< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/prefixCls.tsx" debug > prefixCls< / code >
2023-02-14 17:39:35 +08:00
< code src = "./demo/useConfig.tsx" debug > useConfig< / code >
2023-09-13 11:49:30 +08:00
< code src = "./demo/warning.tsx" debug > warning< / code >
2022-11-09 12:28:04 +08:00
2018-11-26 12:06:42 +08:00
## API
2022-11-17 17:31:26 +08:00
| 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 ](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) config | { nonce: string } | - | |
| direction | Set direction of layout. See [demo ](#components-config-provider-demo-direction ) | `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 ](http://unpkg.com/antd/locale/ ) | object | - | |
2023-06-19 19:30:16 +08:00
| 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' < InlinePopover previewURL = "https://user-images.githubusercontent.com/5378891/230344474-5b9f7e09-0a5d-49e8-bae8-7d2abed6c837.png" ></ InlinePopover > | 'viewport' | 5.5.0 |
2022-11-17 17:31:26 +08:00
| prefixCls | Set prefix className | string | `ant` | |
| renderEmpty | Set empty content of components. Ref [Empty ](/components/empty/ ) | function(componentName: string): ReactNode | - | |
2023-10-06 21:27:41 +08:00
| theme | Set theme, ref [Customize Theme ](/docs/react/customize-theme ) | [Theme ](/docs/react/customize-theme#theme ) | - | 5.0.0 |
2022-11-17 17:31:26 +08:00
| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
2023-09-13 11:49:30 +08:00
| warning | Config warning level, when `strict` is `false` , it will aggregate deprecated information into a single message | { strict: boolean } | - | 5.10.0 |
2019-11-09 16:24:07 +08:00
2023-05-18 23:53:34 +08:00
### ConfigProvider.config()
2021-02-09 21:49:15 +08:00
2023-05-18 23:53:34 +08:00
Setting `Modal` 、`Message`、`Notification` static config. Not work on hooks.
2021-02-09 21:49:15 +08:00
2023-01-19 15:37:54 +08:00
```ts
2021-02-09 21:49:15 +08:00
ConfigProvider.config({
2023-05-18 23:53:34 +08:00
prefixCls: 'ant',
iconPrefixCls: 'anticon',
// 5.6.0+
// Please use hooks version first
theme: { token: { colorPrimary: 'red' } },
2021-02-09 21:49:15 +08:00
});
```
2023-02-14 17:39:35 +08:00
### ConfigProvider.useConfig() `5.3.0+`
Available since `5.2.0` . Get the value of the parent `Provider` . Such as `DisabledContextProvider` , `SizeContextProvider` .
```jsx
const {
componentDisabled, // 5.3.0+
componentSize, // 5.3.0+
} = ConfigProvider.useConfig();
```
2023-06-21 09:56:46 +08:00
| Property | Description | Type | Default | Version |
2023-02-14 17:39:35 +08:00
| --- | --- | --- | --- | --- |
| componentDisabled | antd component disabled state | boolean | - | 5.3.0 |
| componentSize | antd component size state | `small` \| `middle` \| `large` | - | 5.3.0 |
2023-06-19 19:30:16 +08:00
### Component Config
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2023-07-06 09:33:54 +08:00
| alert | Set Alert common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-26 17:09:55 +08:00
| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-03 10:27:31 +08:00
| avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-29 16:43:11 +08:00
| 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 |
2023-06-25 18:28:57 +08:00
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-19 19:30:16 +08:00
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
2023-07-03 10:25:55 +08:00
| card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 09:38:21 +08:00
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-07 09:30:37 +08:00
| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-27 17:13:27 +08:00
| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-26 11:42:46 +08:00
| checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 09:45:25 +08:00
| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-04 11:23:58 +08:00
| colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-07 19:02:55 +08:00
| datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-26 14:38:02 +08:00
| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-19 19:30:16 +08:00
| divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-09-25 20:37:37 +08:00
| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles` : 5.10.0 |
2023-06-26 17:10:26 +08:00
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-09-14 17:04:05 +08:00
| flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
2023-06-28 14:13:14 +08:00
| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages ](/components/form/#validatemessages ), requiredMark?: boolean \| `optional` , scrollToFirstError?: boolean \| [Options ](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options ) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
2023-06-25 14:46:13 +08:00
| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-28 11:53:26 +08:00
| input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
2023-06-28 13:51:24 +08:00
| layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 09:43:03 +08:00
| list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-05 19:48:33 +08:00
| menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-27 10:51:23 +08:00
| mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-03 20:38:14 +08:00
| message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-09-25 14:27:41 +08:00
| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` and `styles` : 5.10.0 |
2023-07-03 20:37:11 +08:00
| notification | Set Notification common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-26 15:32:18 +08:00
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-05 19:21:56 +08:00
| progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-26 19:07:57 +08:00
| radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-29 19:30:34 +08:00
| rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-25 16:20:39 +08:00
| result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-05 18:00:46 +08:00
| skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-25 09:32:53 +08:00
| segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-28 11:53:26 +08:00
| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-25 17:28:00 +08:00
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-30 11:29:39 +08:00
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-19 19:30:16 +08:00
| space | Set Space common props, ref [Space ](/components/space ) | { size: `small` \| `middle` \| `large` \| `number` , className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
2023-06-20 19:34:45 +08:00
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 21:54:54 +08:00
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-25 11:42:31 +08:00
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-30 20:42:43 +08:00
| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-03 13:38:38 +08:00
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-30 17:19:27 +08:00
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 10:27:39 +08:00
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-07 19:02:55 +08:00
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-06 09:36:45 +08:00
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-03 22:42:46 +08:00
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-06-20 14:35:05 +08:00
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-03 16:38:56 +08:00
| upload | Set Upload common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
2023-07-25 16:29:47 +08:00
| wave | Config wave effect | { disabled?: boolean, showEffect?: (node: HTMLElement, info: { className, token, component }) => void } | - | 5.8.0 |
2023-06-19 19:30:16 +08:00
2019-11-09 16:24:07 +08:00
## FAQ
2020-05-27 20:05:13 +08:00
#### How to contribute a new language?
2022-12-22 14:12:26 +08:00
See [<Adding new language> ](/docs/react/i18n#adding-newplanguage ).
2020-05-27 20:05:13 +08:00
2022-07-12 13:10:20 +08:00
#### Date-related components locale is not working?
2019-11-09 16:24:07 +08:00
2022-12-22 14:12:26 +08:00
See FAQ [Date-related-components-locale-is-not-working? ](/docs/react/faq#date-related-components-locale-is-not-working )
2019-12-09 19:40:43 +08:00
#### Modal throw error when setting `getPopupContainer`?
2020-10-21 10:33:43 +08:00
Related issue: < https: / / github . com / ant-design / ant-design / issues / 19974 >
2019-12-09 19:40:43 +08:00
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 ](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a ) below.
```diff
< ConfigProvider
- getPopupContainer={triggerNode => triggerNode.parentNode}
+ getPopupContainer={node => {
+ if (node) {
+ return node.parentNode;
+ }
+ return document.body;
+ }}
>
< App / >
< / ConfigProvider >
```
2022-11-29 10:39:57 +08:00
#### Why can't ConfigProvider props (like `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.
2022-12-13 18:07:28 +08:00
#### Locale is not working with Vite in production mode?
Related issue: [#39045 ](https://github.com/ant-design/ant-design/issues/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.