diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 72d2c6ebb..5a0dbb73c 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -1,7 +1,7 @@
 import { nextTick, inject, defineComponent } from 'vue';
 import TransitionEvents from './css-animation/Event';
 import raf from './raf';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { findDOMNode } from './props-util';
 let styleForPesudo: HTMLStyleElement | null;
 
@@ -33,7 +33,7 @@ export default defineComponent({
     });
   },
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       configProvider,
     };
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 7eea0b00c..b38d2dd65 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -5,7 +5,7 @@ import omit from 'omit.js';
 import ResizeObserver from '../vc-resize-observer';
 import BaseMixin from '../_util/BaseMixin';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import {
   addObserveTarget,
@@ -46,7 +46,7 @@ const Affix = {
   mixins: [BaseMixin],
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index c51b25135..b244d3a65 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -13,7 +13,7 @@ import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
 import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 function noop() {}
 
@@ -62,7 +62,7 @@ const Alert = {
   mixins: [BaseMixin],
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/anchor/Anchor.jsx b/components/anchor/Anchor.jsx
index b8ca299aa..89b8b04aa 100644
--- a/components/anchor/Anchor.jsx
+++ b/components/anchor/Anchor.jsx
@@ -7,7 +7,7 @@ import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
 import { initDefaultProps, findDOMNode } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 function getDefaultContainer() {
   return window;
@@ -128,7 +128,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   mounted() {
diff --git a/components/anchor/AnchorLink.jsx b/components/anchor/AnchorLink.jsx
index cca32ff82..7fcc7c504 100644
--- a/components/anchor/AnchorLink.jsx
+++ b/components/anchor/AnchorLink.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, getComponent } from '../_util/props-util';
 import classNames from '../_util/classNames';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 function noop() {}
 
 export const AnchorLinkProps = {
@@ -26,7 +26,7 @@ export default {
         $data: {},
       }),
       antAnchorContext: inject('antAnchorContext', {}),
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   watch: {
diff --git a/components/auto-complete/index.jsx b/components/auto-complete/index.jsx
index 131ea470d..aef2c1e7a 100644
--- a/components/auto-complete/index.jsx
+++ b/components/auto-complete/index.jsx
@@ -4,7 +4,7 @@ import Select, { AbstractSelectProps, SelectValue } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
 
 // const DataSourceItemObject = PropTypes.shape({
@@ -59,7 +59,7 @@ const AutoComplete = {
   // },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index 7af6b5c7f..14c4ffc5a 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getComponent } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 
@@ -29,7 +29,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/back-top/index.jsx b/components/back-top/index.jsx
index bb715156e..487e9af46 100644
--- a/components/back-top/index.jsx
+++ b/components/back-top/index.jsx
@@ -6,7 +6,7 @@ import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
 import BaseMixin from '../_util/BaseMixin';
 import getTransitionProps from '../_util/getTransitionProps';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 
 function getDefaultTarget() {
@@ -25,7 +25,7 @@ const BackTop = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/badge/Badge.jsx b/components/badge/Badge.jsx
index 98368c2e1..ed525299f 100644
--- a/components/badge/Badge.jsx
+++ b/components/badge/Badge.jsx
@@ -6,7 +6,7 @@ import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import getTransitionProps from '../_util/getTransitionProps';
 import isNumeric from '../_util/isNumeric';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { inject, Transition } from 'vue';
 
 const BadgeProps = {
@@ -38,7 +38,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx
index 4fbcde2e2..675ce6028 100644
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import omit from 'omit.js';
 import { cloneElement } from '../_util/vnode';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { inject } from 'vue';
 
 function getNumberArray(num) {
@@ -35,7 +35,7 @@ export default {
   props: ScrollNumberProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/breadcrumb/Breadcrumb.jsx b/components/breadcrumb/Breadcrumb.jsx
index 8a8f940a9..7d4db596b 100644
--- a/components/breadcrumb/Breadcrumb.jsx
+++ b/components/breadcrumb/Breadcrumb.jsx
@@ -2,7 +2,7 @@ import { inject, cloneVNode } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty, getComponent, getSlot } from '../_util/props-util';
 import warning from '../_util/warning';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
 
@@ -37,7 +37,7 @@ export default {
   props: BreadcrumbProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/breadcrumb/BreadcrumbItem.jsx b/components/breadcrumb/BreadcrumbItem.jsx
index 4795784b1..332533d28 100644
--- a/components/breadcrumb/BreadcrumbItem.jsx
+++ b/components/breadcrumb/BreadcrumbItem.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { hasProp, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import DropDown from '../dropdown/dropdown';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 
@@ -16,7 +16,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/breadcrumb/BreadcrumbSeparator.jsx b/components/breadcrumb/BreadcrumbSeparator.jsx
index a0ac764d1..2ad973d54 100644
--- a/components/breadcrumb/BreadcrumbSeparator.jsx
+++ b/components/breadcrumb/BreadcrumbSeparator.jsx
@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import PropTypes from '../_util/vue-types';
 import { getSlot } from '../_util/props-util';
 
@@ -11,7 +11,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx
index 9fd1c70d5..93cc12ed0 100644
--- a/components/button/button-group.jsx
+++ b/components/button/button-group.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import { filterEmpty, getSlot } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const ButtonGroupProps = {
   prefixCls: PropTypes.string,
@@ -16,7 +16,7 @@ export default {
   name: 'AButtonGroup',
   props: ButtonGroupProps,
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       configProvider,
     };
diff --git a/components/button/button.jsx b/components/button/button.jsx
index 17294620b..f03357cd0 100644
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -3,7 +3,7 @@ import Wave from '../_util/wave';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import buttonTypes from './buttonTypes';
 import { getSlot, getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 // eslint-disable-next-line no-console
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -15,7 +15,7 @@ export default {
   props,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx
index 3d04b510f..8b6330a3c 100644
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@@ -3,7 +3,7 @@ import Select from '../select';
 import { Group, Button } from '../radio';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const { Option } = Select;
 
@@ -41,7 +41,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   // private calendarHeaderNode: HTMLDivElement;
diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index 97a3ee6d0..da88e6a4c 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -7,7 +7,7 @@ import FullCalendar from '../vc-calendar/src/FullCalendar';
 import Header from './Header';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import interopDefault from '../_util/interopDefault';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import enUS from './locale/en_US';
 import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
 
@@ -57,7 +57,7 @@ const Calendar = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index c97775708..cf732507b 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -5,7 +5,7 @@ import Col from '../col';
 import PropTypes from '../_util/vue-types';
 import { getComponent, getSlot, isEmptyElement } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
 
 const { TabPane } = Tabs;
@@ -33,7 +33,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/card/Grid.jsx b/components/card/Grid.jsx
index e3f24a2fc..75ed7af08 100644
--- a/components/card/Grid.jsx
+++ b/components/card/Grid.jsx
@@ -1,6 +1,6 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getSlot } from '../_util/props-util';
 
 export default {
@@ -12,7 +12,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx
index 85c64c8c9..d1c290af9 100644
--- a/components/card/Meta.jsx
+++ b/components/card/Meta.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ACardMeta',
@@ -13,7 +13,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx
index acd98abaf..e6af9b1a9 100644
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import debounce from 'lodash-es/debounce';
 import hasProp, { initDefaultProps, getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import classNames from '../_util/classNames';
 import SlickCarousel from '../vc-slick/src';
@@ -63,7 +63,7 @@ const Carousel = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   beforeMount() {
diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx
index 1d354e3d7..96f5b9299 100644
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@@ -22,7 +22,7 @@ import {
 import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import warning from '../_util/warning';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const CascaderOptionType = PropTypes.shape({
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -157,7 +157,7 @@ const Cascader = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       localeData: inject('localeData', {}),
     };
   },
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 69e33d28f..aa75646be 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import VcCheckbox from '../vc-checkbox';
 import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 function noop() {}
 
@@ -29,7 +29,7 @@ export default {
 
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       checkboxGroupContext: inject('checkboxGroupContext', undefined),
     };
   },
diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx
index e65265a2f..c9765d92c 100644
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@@ -2,7 +2,7 @@ import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import Checkbox from './Checkbox';
 import hasProp, { getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 function noop() {}
 export default {
@@ -31,7 +31,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx
index ace90f1f4..3464e6f8b 100644
--- a/components/collapse/Collapse.jsx
+++ b/components/collapse/Collapse.jsx
@@ -10,7 +10,7 @@ import {
 import { cloneElement } from '../_util/vnode';
 import VcCollapse, { collapseProps } from '../vc-collapse';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ACollapse',
@@ -22,7 +22,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.jsx
index 7452d50ba..381f87d1b 100644
--- a/components/collapse/CollapsePanel.jsx
+++ b/components/collapse/CollapsePanel.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import VcCollapse, { panelProps } from '../vc-collapse';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ACollapsePanel',
@@ -11,7 +11,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/color-picker/ColorPicker.jsx b/components/color-picker/ColorPicker.jsx
index 7c99a0565..f0ecba4e3 100644
--- a/components/color-picker/ColorPicker.jsx
+++ b/components/color-picker/ColorPicker.jsx
@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import BaseMixin from '../_util/BaseMixin';
 import Pickr from '@simonwep/pickr/dist/pickr.es5.min';
 import Icon from '../icon';
@@ -31,7 +31,7 @@ export default {
     hue: PropTypes.bool.def(true), //是否开启色彩预选
   },
   inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+    configProvider: { default: () => defaultConfigProvider },
   },
   data() {
     return {
diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index 600bb489a..a9949ffd9 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -1,6 +1,6 @@
 import { inject, VNodeTypes, CSSProperties, App, SetupContext } from 'vue';
 import classNames from '../_util/classNames';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export interface CommentProps {
   /** List of action items rendered below the comment content */
@@ -31,7 +31,7 @@ const Comment = (
   }: CommentProps,
   { slots }: SetupContext,
 ) => {
-  const { getPrefixCls } = inject('configProvider', ConfigConsumerProps);
+  const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
 
   const renderNested = (prefixCls: string, nestedChildren: any) => {
     return <div class={classNames(`${prefixCls}-nested`)}>{nestedChildren}</div>;
diff --git a/components/config-provider/SizeContext.tsx b/components/config-provider/SizeContext.tsx
index b846aed0e..317c2c5e8 100644
--- a/components/config-provider/SizeContext.tsx
+++ b/components/config-provider/SizeContext.tsx
@@ -1 +1,14 @@
+import { defineComponent, PropType, provide } from 'vue';
+
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
+
+export const SizeContextProvider = defineComponent({
+  props: {
+    size: String as PropType<SizeType>,
+  },
+  setup(props, { slots }) {
+    provide('sizeProvider', props.size);
+
+    return () => slots.default?.();
+  },
+});
diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx
deleted file mode 100644
index 62f21341a..000000000
--- a/components/config-provider/context.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
-import { Locale } from '../locale-provider';
-import { SizeType } from './SizeContext';
-
-export interface CSPConfig {
-  nonce?: string;
-}
-
-export interface IConfigConsumerProps {
-  getTargetContainer?: () => HTMLElement;
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  rootPrefixCls?: string;
-  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
-  renderEmpty: RenderEmptyHandler;
-  csp?: CSPConfig;
-  autoInsertSpaceInButton?: boolean;
-  input?: {
-    autoComplete?: string;
-  };
-  locale?: Locale;
-  pageHeader?: {
-    ghost: boolean;
-  };
-  direction?: 'ltr' | 'rtl';
-  space?: {
-    size?: SizeType | number;
-  };
-  virtual?: boolean;
-  dropdownMatchSelectWidth?: boolean;
-}
-
-export const ConfigContext = {
-  // We provide a default function for Context without provider
-  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
-    if (customizePrefixCls) return customizePrefixCls;
-
-    return suffixCls ? `ant-${suffixCls}` : 'ant';
-  },
-
-  renderEmpty: defaultRenderEmpty,
-};
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 98cef89fc..b1e6d261e 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -2,13 +2,39 @@ import { reactive, provide, VNodeTypes, PropType, defineComponent, App } from 'v
 import PropTypes from '../_util/vue-types';
 import { getComponentFromSetup } from '../_util/props-util';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
-import { CSPConfig } from './context';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
 
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 
+export interface CSPConfig {
+  nonce?: string;
+}
+
+export interface ConfigConsumerProps {
+  getTargetContainer?: () => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  rootPrefixCls?: string;
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
+  renderEmpty: RenderEmptyHandler;
+  csp?: CSPConfig;
+  autoInsertSpaceInButton?: boolean;
+  input?: {
+    autoComplete?: string;
+  };
+  locale?: Locale;
+  pageHeader?: {
+    ghost: boolean;
+  };
+  direction?: 'ltr' | 'rtl';
+  space?: {
+    size?: SizeType | number;
+  };
+  virtual?: boolean;
+  dropdownMatchSelectWidth?: boolean;
+}
+
 export const configConsumerProps = [
   'getTargetContainer',
   'getPopupContainer',
@@ -128,7 +154,7 @@ const ConfigProvider = defineComponent({
   },
 });
 
-export const ConfigConsumerProps = {
+export const defaultConfigProvider = {
   getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
     if (customizePrefixCls) return customizePrefixCls;
     return `ant-${suffixCls}`;
diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx
index 87d7cb72e..c3e86039d 100644
--- a/components/config-provider/renderEmpty.tsx
+++ b/components/config-provider/renderEmpty.tsx
@@ -1,13 +1,13 @@
 import { inject } from 'vue';
 import Empty from '../empty';
-import { ConfigConsumerProps } from '.';
+import { defaultConfigProvider } from '.';
 
 export interface RenderEmptyProps {
   componentName?: string;
 }
 
 const RenderEmpty = (props: RenderEmptyProps) => {
-  const configProvider = inject('configProvider', ConfigConsumerProps);
+  const configProvider = inject('configProvider', defaultConfigProvider);
   const renderHtml = (componentName?: string) => {
     const { getPrefixCls } = configProvider;
     const prefix = getPrefixCls('empty');
diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx
index f9cee2e60..688aa6600 100644
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@@ -6,7 +6,7 @@ import classNames from '../_util/classNames';
 import shallowequal from '../_util/shallowequal';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import Tag from '../tag';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import interopDefault from '../_util/interopDefault';
 import { RangePickerProps } from './interface';
 import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
@@ -72,7 +72,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/date-picker/WeekPicker.jsx b/components/date-picker/WeekPicker.jsx
index 0836b6492..d6560cc60 100644
--- a/components/date-picker/WeekPicker.jsx
+++ b/components/date-picker/WeekPicker.jsx
@@ -3,7 +3,7 @@ import moment from 'moment';
 import Calendar from '../vc-calendar';
 import VcDatePicker from '../vc-calendar/src/Picker';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
 import classNames from '../_util/classNames';
 import BaseMixin from '../_util/BaseMixin';
@@ -27,7 +27,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js
index 547667eb4..695cc7a90 100644
--- a/components/date-picker/createPicker.js
+++ b/components/date-picker/createPicker.js
@@ -6,7 +6,7 @@ import VcDatePicker from '../vc-calendar/src/Picker';
 import classNames from '../_util/classNames';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import interopDefault from '../_util/interopDefault';
 import BaseMixin from '../_util/BaseMixin';
 import {
@@ -34,7 +34,7 @@ export default function createPicker(TheCalendar, props) {
     mixins: [BaseMixin],
     setup() {
       return {
-        configProvider: inject('configProvider', ConfigConsumerProps),
+        configProvider: inject('configProvider', defaultConfigProvider),
       };
     },
     data() {
diff --git a/components/date-picker/wrapPicker.js b/components/date-picker/wrapPicker.js
index 22b6e7128..0d8a99bf7 100644
--- a/components/date-picker/wrapPicker.js
+++ b/components/date-picker/wrapPicker.js
@@ -5,7 +5,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { generateShowHourMinuteSecond } from '../time-picker';
 import enUS from './locale/en_US';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
 
 const DEFAULT_FORMAT = {
@@ -54,7 +54,7 @@ export default function wrapPicker(Picker, props, pickerType) {
     // },
     setup() {
       return {
-        configProvider: inject('configProvider', ConfigConsumerProps),
+        configProvider: inject('configProvider', defaultConfigProvider),
       };
     },
     created() {
diff --git a/components/descriptions/index.jsx b/components/descriptions/index.jsx
index 5157d8e73..64c5bef19 100644
--- a/components/descriptions/index.jsx
+++ b/components/descriptions/index.jsx
@@ -1,7 +1,7 @@
 import { inject, cloneVNode } from 'vue';
 import warning from '../_util/warning';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import Col from './Col';
 import PropTypes from '../_util/vue-types';
 import {
@@ -115,7 +115,7 @@ const Descriptions = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/divider/index.jsx b/components/divider/index.jsx
index dc5ca7963..da92314e4 100644
--- a/components/divider/index.jsx
+++ b/components/divider/index.jsx
@@ -1,6 +1,6 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getSlot } from '../_util/props-util';
 
 const Divider = {
@@ -13,7 +13,7 @@ const Divider = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index 77a37e6d0..534ec611c 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -6,7 +6,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import { getComponent, getOptionProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const Drawer = {
   name: 'ADrawer',
@@ -46,7 +46,7 @@ const Drawer = {
     };
   },
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       configProvider,
     };
diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.jsx
index 086bd19e3..4b25e3a11 100644
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@@ -7,7 +7,7 @@ import Dropdown from './dropdown';
 import PropTypes from '../_util/vue-types';
 import { hasProp, getComponent, getSlot } from '../_util/props-util';
 import getDropdownProps from './getDropdownProps';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
 
 const ButtonTypesProps = buttonTypes();
@@ -36,7 +36,7 @@ export default {
   props: DropdownButtonProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx
index f573fefe2..561eb4af7 100644
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.jsx
@@ -12,7 +12,7 @@ import {
   getSlot,
 } from '../_util/props-util';
 import getDropdownProps from './getDropdownProps';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 
 const DropdownProps = getDropdownProps();
@@ -29,7 +29,7 @@ const Dropdown = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index eca955557..db1220c28 100755
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -6,7 +6,7 @@ import isRegExp from 'lodash-es/isRegExp';
 import warning from '../_util/warning';
 import FormItem from './FormItem';
 import { initDefaultProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getNamePath, containsNamePath } from './utils/valueUtil';
 import { defaultValidateMessages } from './utils/messages';
 import { allPromiseFinish } from './utils/asyncUtil';
@@ -80,7 +80,7 @@ const Form = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   watch: {
diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 61241a6d1..e0b2d23de 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -15,7 +15,7 @@ import hasProp, {
   getSlot,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { cloneElement } from '../_util/vnode';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
@@ -99,7 +99,7 @@ export default {
   setup() {
     return {
       isFormItemChildren: inject('isFormItemChildren', false),
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       FormContext: inject('FormContext', {}),
     };
   },
diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx
index 81422c0d7..1a9582168 100644
--- a/components/grid/Col.tsx
+++ b/components/grid/Col.tsx
@@ -1,6 +1,6 @@
 import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue';
 import classNames from '../_util/classNames';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { rowContextState } from './Row';
 
 type ColSpanType = number | string;
@@ -46,7 +46,7 @@ function parseFlex(flex: FlexType): string {
 export default defineComponent<ColProps>({
   name: 'ACol',
   setup(props, { slots }) {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     const rowContext = inject<rowContextState>('rowContext', {});
 
     return () => {
diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx
index 9bd755f50..72324cedd 100644
--- a/components/grid/Row.tsx
+++ b/components/grid/Row.tsx
@@ -11,7 +11,7 @@ import {
 import classNames from 'classnames';
 import { tuple } from '../_util/type';
 import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import ResponsiveObserve, {
   Breakpoint,
   ScreenMap,
@@ -79,7 +79,7 @@ export default defineComponent<RowProps>({
     const gutterRef = ref<Gutter | [Gutter, Gutter]>();
     gutterRef.value = props.gutter;
 
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     const { getPrefixCls } = configProvider;
 
     const getGutter = (): [number, number] => {
diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx
index c1730db9c..b0495b90a 100644
--- a/components/input-number/index.jsx
+++ b/components/input-number/index.jsx
@@ -5,7 +5,7 @@ import classNames from '../_util/classNames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import VcInputNumber from '../vc-input-number/src';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const InputNumberProps = {
   prefixCls: PropTypes.string,
@@ -35,7 +35,7 @@ const InputNumber = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   mounted() {
diff --git a/components/input/Group.jsx b/components/input/Group.jsx
index 66ca8df06..191559813 100644
--- a/components/input/Group.jsx
+++ b/components/input/Group.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'AInputGroup',
@@ -16,7 +16,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   computed: {
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 8c6a24700..2e5980701 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -4,7 +4,7 @@ import classNames from '../_util/classNames';
 import omit from 'omit.js';
 import inputProps from './inputProps';
 import { hasProp, getComponent, getOptionProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import ClearableLabeledInput from './ClearableLabeledInput';
 
 export function fixControlledValue(value) {
@@ -56,7 +56,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/input/Search.jsx b/components/input/Search.jsx
index efac9c7ad..282c06c99 100644
--- a/components/input/Search.jsx
+++ b/components/input/Search.jsx
@@ -9,7 +9,7 @@ import Button from '../button';
 import { cloneElement } from '../_util/vnode';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
 
 export default {
@@ -23,7 +23,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/input/TextArea.jsx b/components/input/TextArea.jsx
index 870e0ff8a..607cd10b4 100644
--- a/components/input/TextArea.jsx
+++ b/components/input/TextArea.jsx
@@ -3,7 +3,7 @@ import ClearableLabeledInput from './ClearableLabeledInput';
 import ResizableTextArea from './ResizableTextArea';
 import inputProps from './inputProps';
 import { hasProp, getOptionProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { fixControlledValue, resolveOnChange } from './Input';
 import PropTypes from '../_util/vue-types';
 
@@ -21,7 +21,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/layout/Sider.jsx b/components/layout/Sider.jsx
index 6c1b07b23..9e94673f1 100644
--- a/components/layout/Sider.jsx
+++ b/components/layout/Sider.jsx
@@ -10,7 +10,7 @@ import {
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import isNumeric from '../_util/isNumeric';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import BarsOutlined from '@ant-design/icons-vue/BarsOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
@@ -109,7 +109,7 @@ export default {
   setup() {
     return {
       siderHook: inject('siderHook', {}),
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
index 24e2566a3..e1415962c 100644
--- a/components/layout/layout.jsx
+++ b/components/layout/layout.jsx
@@ -2,7 +2,7 @@ import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import { getOptionProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const BasicProps = {
   prefixCls: PropTypes.string,
@@ -17,7 +17,7 @@ function generator({ suffixCls, tagName, name }) {
       props: BasicComponent.props,
       setup() {
         return {
-          configProvider: inject('configProvider', ConfigConsumerProps),
+          configProvider: inject('configProvider', defaultConfigProvider),
         };
       },
       render() {
diff --git a/components/list/Item.jsx b/components/list/Item.jsx
index ba91f7c35..d7c036654 100644
--- a/components/list/Item.jsx
+++ b/components/list/Item.jsx
@@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import { getComponent, isStringElement, isEmptyElement, getSlot } from '../_util/props-util';
 import { Col } from '../grid';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { ListGridType } from './index';
 import { cloneElement } from '../_util/vnode';
 import { inject } from 'vue';
@@ -22,7 +22,7 @@ export const ListItemMetaProps = {
 };
 
 export const ListItemMeta = (props, { slots }) => {
-  const configProvider = inject('configProvider', ConfigConsumerProps);
+  const configProvider = inject('configProvider', defaultConfigProvider);
   const getPrefixCls = configProvider.getPrefixCls;
   const { prefixCls: customizePrefixCls } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
@@ -60,7 +60,7 @@ export default {
   props: ListItemProps,
   setup() {
     const listContext = inject('listContext', {});
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       listContext,
       configProvider,
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 474089fc2..ad2ebfa53 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 import Spin from '../spin';
 import Pagination, { PaginationConfig } from '../pagination';
@@ -66,7 +66,7 @@ const List = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx
index e2cc5f360..e00f58db6 100644
--- a/components/locale-provider/LocaleReceiver.tsx
+++ b/components/locale-provider/LocaleReceiver.tsx
@@ -23,7 +23,7 @@ export default defineComponent({
     },
     children: {
       type: Function as PropType<
-        (locale: Locale, localeCode?: string, fullLocale?: Locale) => VNodeTypes
+        (locale: object, localeCode?: string, fullLocale?: object) => VNodeTypes
       >,
     },
   },
diff --git a/components/mentions/index.jsx b/components/mentions/index.jsx
index 9cc6283c1..f568c5cfb 100644
--- a/components/mentions/index.jsx
+++ b/components/mentions/index.jsx
@@ -6,7 +6,7 @@ import VcMentions from '../vc-mentions';
 import { mentionsProps } from '../vc-mentions/src/mentionsProps';
 import Spin from '../spin';
 import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 
 const { Option } = VcMentions;
@@ -61,7 +61,7 @@ const Mentions = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index b075781c8..f7bb29ff3 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -9,7 +9,7 @@ import Item from './MenuItem';
 import { hasProp, getOptionProps, getSlot } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import commonPropsType from '../vc-menu/commonPropsType';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 // import raf from '../_util/raf';
 
 export const MenuMode = PropTypes.oneOf([
@@ -64,7 +64,7 @@ const Menu = {
     const layoutSiderContext = inject('layoutSiderContext', {});
     const layoutSiderCollapsed = toRef(layoutSiderContext, 'sCollapsed');
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       layoutSiderContext,
       layoutSiderCollapsed,
     };
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 453b76ccb..c76ce6b40 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -10,7 +10,7 @@ import buttonTypes from '../button/buttonTypes';
 const ButtonType = buttonTypes().type;
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 let mousePosition = null;
 // ref: https://github.com/ant-design/ant-design/issues/15795
@@ -112,7 +112,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   // static info: ModalFunc;
diff --git a/components/page-header/index.jsx b/components/page-header/index.jsx
index 85e8dd810..6c315aad1 100644
--- a/components/page-header/index.jsx
+++ b/components/page-header/index.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent, getOptionProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
 import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
@@ -96,7 +96,7 @@ const PageHeader = {
   props: PageHeaderProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/pagination/Pagination.jsx b/components/pagination/Pagination.jsx
index 5f8d35a44..f97f25389 100644
--- a/components/pagination/Pagination.jsx
+++ b/components/pagination/Pagination.jsx
@@ -9,7 +9,7 @@ import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { inject } from 'vue';
 import classNames from '../_util/classNames';
 
@@ -51,7 +51,7 @@ export default {
 
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx
index f6d3186d0..7fdab5719 100644
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@@ -10,7 +10,7 @@ import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFill
 import Button from '../button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const tooltipProps = abstractTooltipProps();
 const btnProps = buttonTypes();
@@ -43,7 +43,7 @@ const Popconfirm = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/popover/index.jsx b/components/popover/index.jsx
index 07f37995a..ec39343b5 100644
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@@ -3,7 +3,7 @@ import Tooltip from '../tooltip';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const props = abstractTooltipProps();
 const Popover = {
@@ -17,7 +17,7 @@ const Popover = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx
index ae0694fe7..a685306e6 100644
--- a/components/progress/progress.jsx
+++ b/components/progress/progress.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
@@ -46,7 +46,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/radio/Group.jsx b/components/radio/Group.jsx
index 352cc65e9..3e8d25a20 100644
--- a/components/radio/Group.jsx
+++ b/components/radio/Group.jsx
@@ -3,7 +3,7 @@ import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import Radio from './Radio';
 import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ARadioGroup',
@@ -36,7 +36,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   computed: {
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
index d0e30eb7b..e3af29290 100644
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types';
 import VcCheckbox from '../vc-checkbox';
 import classNames from '../_util/classNames';
 import { getOptionProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ARadio',
@@ -29,7 +29,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       radioGroupContext: inject('radioGroupContext', null),
     };
   },
diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 0fc883451..09195b4ba 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import Radio from './Radio';
 import { getOptionProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export default {
   name: 'ARadioButton',
@@ -10,7 +10,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
       radioGroupContext: inject('radioGroupContext', {}),
     };
   },
diff --git a/components/rate/index.jsx b/components/rate/index.jsx
index 75a2a8409..b9d116fd4 100644
--- a/components/rate/index.jsx
+++ b/components/rate/index.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import VcRate from '../vc-rate';
 import StarFilled from '@ant-design/icons-vue/StarFilled';
 import Tooltip from '../tooltip';
@@ -25,7 +25,7 @@ const Rate = {
   props: RateProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/result/index.jsx b/components/result/index.jsx
index 77953a754..7dc924286 100644
--- a/components/result/index.jsx
+++ b/components/result/index.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
@@ -56,7 +56,7 @@ const Result = {
   props: ResultProps,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render(h) {
diff --git a/components/select/index.jsx b/components/select/index.jsx
index 84183efbe..de015b901 100644
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@@ -3,7 +3,7 @@ import warning from '../_util/warning';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import { Select as VcSelect, Option, OptGroup } from '../vc-select';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
@@ -103,7 +103,7 @@ const Select = {
   propTypes: SelectPropTypes,
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/skeleton/index.jsx b/components/skeleton/index.jsx
index b1e681784..bd4f14aad 100644
--- a/components/skeleton/index.jsx
+++ b/components/skeleton/index.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, hasProp } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import Avatar, { SkeletonAvatarProps } from './Avatar';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
@@ -71,7 +71,7 @@ const Skeleton = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 350f25fd8..8a816914a 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -6,7 +6,7 @@ import VcSlider from '../vc-slider/src/Slider';
 import VcRange from '../vc-slider/src/Range';
 import VcHandle from '../vc-slider/src/Handle';
 import Tooltip from '../tooltip';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
 
 const tooltipProps = abstractTooltipProps();
@@ -46,7 +46,7 @@ const Slider = {
   mixins: [BaseMixin],
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   props: {
diff --git a/components/space/index.tsx b/components/space/index.tsx
index 39d42932e..988ac5639 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -1,14 +1,6 @@
 import { inject, App, CSSProperties, SetupContext } from 'vue';
-import { initDefaultProps } from '../_util/props-util';
 import { filterEmpty } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
-
-// export const SpaceProps = {
-//   prefixCls: PropTypes.string,
-//   align: PropTypes.tuple<'start' | 'end' | 'center' | 'baseline'>(),
-//   size: PropTypes.tuple<'small' | 'middle' | 'large'>(),
-//   direction: PropTypes.tuple<'horizontal' | 'vertical'>(),
-// };
+import { defaultConfigProvider, SizeType } from '../config-provider';
 
 const spaceSize = {
   small: 8,
@@ -27,8 +19,8 @@ export interface SpaceProps {
 }
 
 const Space = (props: SpaceProps, { slots }: SetupContext) => {
-  const configProvider = inject('configProvider', ConfigConsumerProps);
-  const { align, size, direction, prefixCls: customizePrefixCls } = props;
+  const configProvider = inject('configProvider', defaultConfigProvider);
+  const { align, size = 'small', direction = 'horizontal', prefixCls: customizePrefixCls } = props;
 
   const { getPrefixCls } = configProvider;
   const prefixCls = getPrefixCls('space', customizePrefixCls);
@@ -71,14 +63,12 @@ const Space = (props: SpaceProps, { slots }: SetupContext) => {
     </div>
   );
 };
-Space.props = initDefaultProps(SpaceProps, {
-  size: 'small',
-  direction: 'horizontal',
-});
+
+Space.displayName = 'ASpace';
 
 /* istanbul ignore next */
 Space.install = function(app: App) {
-  app.component('ASpace', Space);
+  app.component(Space.displayName, Space);
 };
 
 export default Space;
diff --git a/components/spin/Spin.jsx b/components/spin/Spin.jsx
index 2e0f30fc4..0dcb18745 100644
--- a/components/spin/Spin.jsx
+++ b/components/spin/Spin.jsx
@@ -3,7 +3,7 @@ import debounce from 'lodash-es/debounce';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
 
@@ -45,7 +45,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/statistic/Statistic.jsx b/components/statistic/Statistic.jsx
index 38f1f8858..c31c6b4c0 100644
--- a/components/statistic/Statistic.jsx
+++ b/components/statistic/Statistic.jsx
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent, initDefaultProps } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import StatisticNumber from './Number';
 
 export const StatisticProps = {
@@ -29,7 +29,7 @@ export default {
 
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/steps/index.jsx b/components/steps/index.jsx
index 4d228a5c1..fc688863f 100644
--- a/components/steps/index.jsx
+++ b/components/steps/index.jsx
@@ -4,7 +4,7 @@ import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import VcSteps from '../vc-steps';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const getStepsProps = (defaultProps = {}) => {
   const props = {
@@ -32,7 +32,7 @@ const Steps = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   Step: { ...VcSteps.Step, name: 'AStep' },
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index 64c00b5d8..23071aa6e 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from '../_util/vue-types';
 import hasProp, { getOptionProps, getComponent } from '../_util/props-util';
 import VcSwitch from '../vc-switch';
 import Wave from '../_util/wave';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 
 const Switch = {
@@ -26,7 +26,7 @@ const Switch = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   methods: {
diff --git a/components/table/Table.jsx b/components/table/Table.jsx
index e3c39cfb5..27f66ae61 100755
--- a/components/table/Table.jsx
+++ b/components/table/Table.jsx
@@ -14,7 +14,7 @@ import createBodyRow from './createBodyRow';
 import { flatArray, treeMap, flatFilter } from './util';
 import { initDefaultProps, getOptionProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { TableProps } from './interface';
 import Pagination from '../pagination';
 import Spin from '../spin';
@@ -132,7 +132,7 @@ export default {
 
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 47a78a840..aa6a1051c 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -15,7 +15,7 @@ import {
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import isValid from '../_util/isValid';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import TabBar from './TabBar';
 
 export default {
@@ -45,7 +45,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   mounted() {
diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index da023497b..331e3a500 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -1,6 +1,6 @@
 import { inject, CSSProperties, SetupContext } from 'vue';
 import classNames from '../_util/classNames';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export interface CheckableTagProps {
   prefixCls?: string;
@@ -12,7 +12,7 @@ export interface CheckableTagProps {
 }
 
 const CheckableTag = (props: CheckableTagProps, { slots }: SetupContext) => {
-  const { getPrefixCls } = inject('configProvider', ConfigConsumerProps);
+  const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
   const handleClick = (e: MouseEvent) => {
     const { checked, onChange, onClick } = props;
     if (onChange) {
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index cf747e677..8a0d564d4 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -20,7 +20,7 @@ import {
   PresetStatusColorType,
 } from '../_util/colors';
 import { LiteralUnion } from '../_util/type';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import CheckableTag from './CheckableTag';
 
 const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
@@ -41,7 +41,7 @@ export interface TagProps extends HTMLAttributes {
 const Tag = defineComponent({
   inheritAttrs: false,
   setup(_: TagProps, { slots, attrs }: SetupContext) {
-    const { getPrefixCls } = inject('configProvider', ConfigConsumerProps);
+    const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
 
     const visible = ref(true);
 
diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx
index 4584a9cb9..93d83d7c6 100644
--- a/components/time-picker/index.jsx
+++ b/components/time-picker/index.jsx
@@ -16,7 +16,7 @@ import {
   isValidElement,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import {
   checkValidate,
   stringToMoment,
@@ -103,7 +103,7 @@ const TimePicker = {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
 
diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx
index 7dab2fd33..93b36c7a3 100644
--- a/components/timeline/Timeline.jsx
+++ b/components/timeline/Timeline.jsx
@@ -10,7 +10,7 @@ import {
 } from '../_util/props-util';
 import TimelineItem from './TimelineItem';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const TimelineProps = {
   prefixCls: PropTypes.string,
@@ -28,7 +28,7 @@ export default {
     mode: '',
   }),
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       configProvider,
     };
diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.jsx
index fee9d95bd..84bea2a6d 100644
--- a/components/timeline/TimelineItem.jsx
+++ b/components/timeline/TimelineItem.jsx
@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const TimeLineItemProps = {
   prefixCls: PropTypes.string,
@@ -19,7 +19,7 @@ export default {
     pending: false,
   }),
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       configProvider,
     };
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index 9d2fb35b4..e5f915109 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -12,7 +12,7 @@ import {
   isValidElement,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import abstractTooltipProps from './abstractTooltipProps';
 
 const splitObject = (obj, keys) => {
@@ -36,7 +36,7 @@ export default {
   },
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx
index caa841453..e8d276859 100644
--- a/components/transfer/index.jsx
+++ b/components/transfer/index.jsx
@@ -7,7 +7,7 @@ import List from './list';
 import Operation from './operation';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export const TransferDirection = 'left' | 'right';
 
@@ -64,7 +64,7 @@ const Transfer = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx
index 66069d14e..5a56b091b 100644
--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@@ -4,7 +4,7 @@ import classNames from '../_util/classNames';
 import { TreeSelectProps } from './interface';
 import warning from '../_util/warning';
 import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 export { TreeData, TreeSelectProps } from './interface';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
@@ -28,7 +28,7 @@ const TreeSelect = {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   created() {
diff --git a/components/tree/DirectoryTree.jsx b/components/tree/DirectoryTree.jsx
index 3e6eb7a92..b4d6e67c3 100644
--- a/components/tree/DirectoryTree.jsx
+++ b/components/tree/DirectoryTree.jsx
@@ -16,7 +16,7 @@ import {
 } from './util';
 import BaseMixin from '../_util/BaseMixin';
 import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 // export type ExpandAction = false | 'click' | 'dblclick'; export interface
 // DirectoryTreeProps extends TreeProps {   expandAction?: ExpandAction; }
@@ -51,7 +51,7 @@ export default {
   ),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx
index ef301c293..1fbb949ab 100644
--- a/components/tree/Tree.jsx
+++ b/components/tree/Tree.jsx
@@ -10,7 +10,7 @@ import animation from '../_util/openAnimation';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 
 const TreeNode = VcTree.TreeNode;
 function TreeProps() {
@@ -116,7 +116,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   TreeNode,
diff --git a/components/upload/Upload.jsx b/components/upload/Upload.jsx
index ec7488dae..beac03557 100644
--- a/components/upload/Upload.jsx
+++ b/components/upload/Upload.jsx
@@ -6,7 +6,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps, hasProp, getSlot } from '../_util/props-util';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
 import { UploadProps } from './interface';
@@ -35,7 +35,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   // recentUploadStatus: boolean | PromiseLike<any>;
diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx
index 82353281c..48d9bb0b0 100644
--- a/components/upload/UploadList.jsx
+++ b/components/upload/UploadList.jsx
@@ -2,7 +2,7 @@ import { inject, Transition, TransitionGroup } from 'vue';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
-import { ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import { previewImage, isImageUrl } from './utils';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import PaperClipOutlined from '@ant-design/icons-vue/PaperClipOutlined';
@@ -32,7 +32,7 @@ export default {
   }),
   setup() {
     return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   updated() {