ant-design

8.6 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`
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
locale	Language package setting, you can find the packages in antd/locale	object	-
popupMatchSelectWidth	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	-	5.5.0
popupOverflow	Select like component popup logic. Can set to show in viewport or follow window scroll	'viewport' \| 'scroll'	'viewport'	5.5.0
prefixCls	Set prefix className	string	`ant`
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-
theme	Set theme, ref Customize Theme	-	-	5.0.0
virtual	Disable virtual scroll when set to `false`	boolean	-	4.3.0

ConfigProvider.config()

Setting Modal、Message、Notification static config. Not work on hooks.

ConfigProvider.config({
  prefixCls: 'ant',
  iconPrefixCls: 'anticon',

  // 5.6.0+
  // Please use hooks version first
  theme: { token: { colorPrimary: 'red' } },
});

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();

Property	Description	Type	Default	Version
componentDisabled	antd component disabled state	boolean	-	5.3.0
componentSize	antd component size state	`small` \| `middle` \| `large`	-	5.3.0

Component Config

Property	Description	Type	Default	Version
anchor	Set Anchor common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
breadcrumb	Set Breadcrumb common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
button	Set Button common props	{ className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } }	-	5.6.0
checkbox	Set Checkbox common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
descriptions	Set Descriptions common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
divider	Set Divider common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
empty	Set Empty common props	{ className?: string, style?: React.CSSProperties }	-	5.7.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
image	Set Image common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
input	Set Input common props	{ autoComplete?: string }	-	4.2.0
mentions	Set Mentions common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
pagination	Set Pagination common props	{ showSizeChanger?: boolean, className?: string, style?: React.CSSProperties }	-	5.7.0
radio	Set Radio common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
result	Set Result common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
segmented	Set Segmented common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
select	Set Select common props	{ className?: string, showSearch?: boolean, style?: React.CSSProperties }	-
slider	Set Slider common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
space	Set Space common props, ref Space	{ size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } }	-	5.6.0
spin	Set Spin common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
steps	Set Steps common props	{ className?: string, style?: React.CSSProperties }	-	5.7.0
typography	Set Typography common props	{ className?: string, style?: React.CSSProperties }	-	5.7.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.

8.6 KiB Raw Blame History