4.9 KiB
| category | group | title | cover |
|---|---|---|---|
| Components | Other | ConfigProvider | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original |
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 |
| select | Set Select common props | { showSearch?: boolean } | - | |
| 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>
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.