2018-11-26 12:06:42 +08:00
---
category: Components
type: Other
cols: 1
title: ConfigProvider
---
`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
```jsx
import { ConfigProvider } from 'antd';
// ...
return (
< ConfigProvider { . . . yourConfig } >
< App / >
< / ConfigProvider >
);
```
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
```jsx
< ConfigProvider csp = {{ nonce: ' YourNonceCode ' } } >
< Button > My Button< / Button >
< / ConfigProvider >
```
2018-11-26 12:06:42 +08:00
## API
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true | 3.13.0 |
| csp | Set [Content Security Policy ](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) config | { nonce: string } | - | 3.13.1 |
| renderEmpty | set empty content of components. Ref [Empty ](/components/empty/ ) | Function(componentName: string): ReactNode | - | 3.12.2 |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body` . | Function(triggerNode) | `() => document.body` | 3.11.0 |
2019-07-24 10:34:55 +08:00
| locale | language package setting, you can find the packages in [antd/es/locale ](http://unpkg.com/antd/es/locale/ ) | object | 3.21.0 |
2019-07-11 14:14:33 +08:00
| prefixCls | set prefix class | string | ant | 3.12.0 |
2019-10-15 11:46:12 +08:00
| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader ](<(/components/page-header )> | { ghost:boolean } | 'true' | 3.24.0 |
2019-11-09 16:24:07 +08:00
## FAQ
2019-11-21 07:39:57 +08:00
#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?
2019-11-09 16:24:07 +08:00
2019-11-21 07:39:57 +08:00
Please make sure you set moment locale by `moment.locale('zh-cn')` or that you don't have two different versions of moment.