Skip to content

Latest commit

 

History

History
111 lines (84 loc) · 4.85 KB

index.en-US.md

File metadata and controls

111 lines (84 loc) · 4.85 KB
Raw
category group title cover
Components
Other
ConfigProvider

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?

See <Adding 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: #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.