ant-design

6.2 KiB

Raw Blame History

category	group	title	cover	coverDark
Components	Other	ConfigProvider	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/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';
import React from 'react';

// ...
const Demo: React.FC = () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
);

export default Demo;

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 useConfig

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`, scrollToFirstError?: boolean \| Options }	-	requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.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+
});

ConfigProvider.useConfig() `5.3.0+`

Available since 5.2.0. Get the value of the parent Provider. Such as DisabledContextProvider, SizeContextProvider.

const {
  componentDisabled, // 5.3.0+
  componentSize, // 5.3.0+
} = ConfigProvider.useConfig();

返回值	说明	类型	默认值	版本
componentDisabled	antd component disabled state	boolean	-	5.3.0
componentSize	antd component size state	`small` \| `middle` \| `large`	-	5.3.0

FAQ

How to contribute a new language?

See <Adding new language>.

Modal throw error when setting `getPopupContainer`?

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.

Locale is not working with Vite in production mode?

Related issue: #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.

6.2 KiB Raw Blame History

Usage

Content Security Policy

Examples

API

ConfigProvider.config() 4.13.0+

ConfigProvider.useConfig() 5.3.0+

FAQ