4.3 KiB
| category | group | title | cover |
|---|---|---|---|
| Components | Other | ConfigProvider | https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg |
ConfigProvider provides a uniform configuration support for components.
Usage
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';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Content Security Policy
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>
Examples
Locale
Direction
Component size
Theme
prefixCls
API
| 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 |
|
| dropdownMatchSelectWidth | 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 | - | 4.3.0 |
| form | Set Form common props | { validateMessages?: ValidateMessages, requiredMark?: boolean | optional } |
- | requiredMark: 4.8.0 |
| 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 |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| locale | Language package setting, you can find the packages in antd/locale | object | - | |
| prefixCls | Set prefix className | string | ant |
|
| renderEmpty | Set empty content of components. Ref Empty | function(componentName: string): ReactNode | - | |
| space | Set Space size, ref Space |
{ size: small | middle | large | number } |
- | 4.1.0 |
| theme | Set theme, ref Customize Theme | - | - | 5.0.0 |
| virtual | Disable virtual scroll when set to false |
boolean | - | 4.3.0 |
ConfigProvider.config() 4.13.0+
Setting Modal、Message、Notification rootPrefixCls.
ConfigProvider.config({
prefixCls: 'ant', // 4.13.0+
iconPrefixCls: 'anticon', // 4.17.0+
});
FAQ
How to contribute a new language?
Date-related components locale is not working?
See FAQ Date-related-components-locale-is-not-working?
Modal throw error when setting 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>