ant-design-vue/components/config-provider/index.en-US.md

category	type	cols	title	cover
Components	Other	1	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 Vue components underneath itself via the provide / inject, In the render tree all components will have access to the provided config.

<template>
  <a-config-provider :getPopupContainer="getPopupContainer">
    <app />
  </a-config-provider>
</template>
<script>
  export default {
    methods: {
      getPopupContainer(el, dialogContext) {
        if (dialogContext) {
          return dialogContext.getDialogWrap();
        } else {
          return document.body;
        }
      },
    },
  };
</script>

Content Security Policy

Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:

<a-config-provider :csp="{ nonce: 'YourNonceCode' }">
  <a-button>My Button</a-button>
</a-config-provider>

API

Property	Description	Type	Default	Version
autoInsertSpaceInButton	Set false to remove space between 2 chinese characters on Button	boolean	true
componentSize	Config antd component size	small | middle | large	-	3.0
csp	Set Content Security Policy config	{ nonce: string }	-
direction	Set direction of layout. See demo	ltr | rtl	ltr	3.0
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	-	3.0
form	Set Form common props	{ validateMessages?: ValidateMessages, requiredMark?: boolean | optional }	-	3.0
getPopupContainer	to set the container of the popup element. The default is to create a div element in body.	Function(triggerNode, dialogContext)	() => document.body
getTargetContainer	Config Affix, Anchor scroll target container	() => HTMLElement	() => window	3.0
input	Set Input common props	{ autocomplete?: string }	-	3.0
locale	language package setting, you can find the packages in ant-design-vue/es/locale	object	-	1.5.0
pageHeader	Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)>	{ ghost:boolean }	'true'	1.5.0
prefixCls	set prefix class	string	ant
renderEmpty	set empty content of components. Ref Empty	slot-scope | Function(componentName: string): ReactNode	-
space	Set Space size, ref Space	{ size: small | middle | large | number }	-	3.0
transformCellText	Table data can be changed again before rendering. The default configuration of general user empty data.	Function({ text, column, record, index }) => any	-	1.5.4 ｜
virtual	Disable virtual scroll when set to false	boolean	true	3.0

ConfigProvider.config() 3.0.0+

Setting Modal、Message、Notification rootPrefixCls.

ConfigProvider.config({
  prefixCls: 'ant',
});

or

// some cinfig support reactively, you can change prefixCls.value = 'other'
const prefixCls = ref('ant');
ConfigProvider.config({
  prefixCls,
});

FAQ

Does the locale problem still exist in DatePicker even if ConfigProvider locale is used?

Please make sure you set dayjs locale by dayjs.locale('zh-cn') or that you don't have two different versions of dayjs.

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.

 <ConfigProvider
-  getPopupContainer={triggerNode => triggerNode.parentNode}
+  getPopupContainer={node => {
+    if (node) {
+      return node.parentNode;
+    }
+    return document.body;
+  }}
 >
   <App />
 </ConfigProvider>