diff --git a/components/_util/transButton.jsx b/components/_util/transButton.jsx
index 754d8f0f8..cfece1a0d 100644
--- a/components/_util/transButton.jsx
+++ b/components/_util/transButton.jsx
@@ -68,7 +68,7 @@ const TransButton = defineComponent({
         onKeyup={this.onKeyUp}
         style={{ ...(!noStyle ? inlineStyle : null) }}
       >
-        {this.$slots.default && this.$slots.default()}
+        {this.$slots.default?.()}
       </div>
     );
   },
diff --git a/components/_util/wave.jsx b/components/_util/wave.jsx
index 6f41a4a08..945ca7cc9 100644
--- a/components/_util/wave.jsx
+++ b/components/_util/wave.jsx
@@ -169,6 +169,6 @@ export default defineComponent({
     if (csp) {
       this.csp = csp;
     }
-    return this.$slots.default && this.$slots.default()[0];
+    return this.$slots.default?.()[0];
   },
 });
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 29e1bb06f..2d32dbaee 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -258,7 +258,7 @@ const Affix = defineComponent({
       >
         <div {...props} style={placeholderStyle} ref="placeholderNode">
           <div class={className} ref="fixedNode" style={affixStyle}>
-            {$slots.default && $slots.default()}
+            {$slots.default?.()}
           </div>
         </div>
       </ResizeObserver>
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index f761ae214..a76522d4f 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -283,7 +283,7 @@ export default defineComponent({
           <div class={`${prefixCls}-ink`}>
             <span class={inkClass} ref="inkNode" />
           </div>
-          {$slots.default && $slots.default()}
+          {$slots.default?.()}
         </div>
       </div>
     );
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
index 73703c266..4a2578bfe 100644
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -82,7 +82,7 @@ export default defineComponent({
         >
           {title}
         </a>
-        {$slots.default && $slots.default()}
+        {$slots.default?.()}
       </div>
     );
   },
diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
index c57d6b94f..9eeabd45d 100644
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -118,7 +118,7 @@ export default defineComponent({
           }
         : {};
 
-    let children: VueNode = this.$slots.default && this.$slots.default();
+    let children: VueNode = this.$slots.default?.();
     if (src && isImgExist) {
       children = (
         <img src={src} srcset={srcset || srcSet} onError={this.handleImgLoadError} alt={alt} />
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index c96d9c816..01596aef1 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -93,7 +93,7 @@ const BackTop = defineComponent({
     };
 
     const backTopBtn = this.visible ? (
-      <div {...divProps}>{($slots.default && $slots.default()) || defaultElement}</div>
+      <div {...divProps}>{$slots.default?.() || defaultElement}</div>
     ) : null;
     const transitionProps = getTransitionProps('fade');
     return <Transition {...transitionProps}>{backTopBtn}</Transition>;
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap
index 4a1805f5e..9c16dbf92 100644
--- a/components/cascader/__tests__/__snapshots__/index.test.js.snap
+++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap
@@ -69,7 +69,7 @@ exports[`Cascader can be selected 3`] = `
 exports[`Cascader popup correctly when panel is open 1`] = `
 <div>
   <!---->
-  <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
+  <div class="ant-cascader-menus   ant-cascader-menus-placement-bottomLeft " style="left: -999px; top: -995px;">
     <div>
       <ul class="ant-cascader-menu">
         <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
@@ -87,7 +87,7 @@ exports[`Cascader popup correctly when panel is open 1`] = `
 exports[`Cascader popup correctly with defaultValue 1`] = `
 <div>
   <!---->
-  <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft slide-up-enter" style="left: -999px; top: -995px;">
+  <div class="ant-cascader-menus   ant-cascader-menus-placement-bottomLeft " style="left: -999px; top: -995px;">
     <div>
       <ul class="ant-cascader-menu">
         <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
diff --git a/components/comment/__tests__/__snapshots__/index.test.js.snap b/components/comment/__tests__/__snapshots__/index.test.js.snap
index 4bff5d290..54a4a88a7 100644
--- a/components/comment/__tests__/__snapshots__/index.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`Comment Comment can be used as editor, user can customize the editor co
       <!---->
       <div class="ant-spin-container">
         <ul class="ant-list-items">
-          <li class="ant-list-item">
+          <li class="ant-list-item ">
             <div class="ant-comment">
               <div class="ant-comment-inner">
                 <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="comment-avatar"></div>
@@ -43,6 +43,7 @@ exports[`Comment Comment can be used as editor, user can customize the editor co
         <div class="ant-comment-content-detail">
           <div>
             <div class="ant-row ant-form-item">
+              <!---->
               <div class="ant-col ant-form-item-control-wrapper">
                 <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea><!----></span>
                   <!---->
@@ -51,6 +52,7 @@ exports[`Comment Comment can be used as editor, user can customize the editor co
               </div>
             </div>
             <div class="ant-row ant-form-item">
+              <!---->
               <div class="ant-col ant-form-item-control-wrapper">
                 <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="submit" ant-click-animating-without-extra-node="true"><!----><span>Add Comment</span></button>
                   <!----></span>
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 7e60e1074..94be3f1fc 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -1,4 +1,4 @@
-import { reactive, provide, VNodeTypes, PropType, defineComponent, App } from 'vue';
+import { reactive, provide, VNodeTypes, PropType, defineComponent, App, watch } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
@@ -81,7 +81,7 @@ const ConfigProvider = defineComponent({
     getPopupContainer: {
       type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
     },
-    prefixCls: PropTypes.string,
+    prefixCls: String,
     getPrefixCls: {
       type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>,
     },
@@ -140,6 +140,10 @@ const ConfigProvider = defineComponent({
       renderEmpty: renderEmptyComponent,
     });
 
+    watch(props, () => {
+      Object.assign(configProvider, props);
+    });
+
     provide('configProvider', configProvider);
 
     const renderProvider = (legacyLocale: Locale) => {
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 40c055249..9242fdcde 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -187,7 +187,7 @@ const Drawer = defineComponent({
         >
           {this.renderHeader(prefixCls)}
           <div key="body" class={`${prefixCls}-body`} style={bodyStyle}>
-            {this.$slots.default && this.$slots.default()}
+            {this.$slots.default?.()}
           </div>
         </div>
       );
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 1a4dd2cdd..38fff2fac 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -216,7 +216,7 @@ const Select = defineComponent({
         dropdownClassName={rcSelectRtlDropDownClassName}
         onChange={triggerChange}
       >
-        {slots.default && slots.default()}
+        {slots.default?.()}
       </RcSelect>
     );
   },
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 1d485227f..da0727cea 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -43,7 +43,7 @@ export default defineComponent({
       [`${prefixCls}-reverse`]: !!reverse,
       [`${prefixCls}-${mode}`]: !!mode,
     });
-    const children = filterEmpty(this.$slots.default && this.$slots.default());
+    const children = filterEmpty(this.$slots.default?.());
     // // Remove falsy items
     // const falsylessItems = filterEmpty(this.$slots.default)
     // const items = falsylessItems.map((item, idx) => {
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index a1f2cf31d..de32d3958 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -52,9 +52,7 @@ export default defineComponent({
         >
           {dot}
         </div>
-        <div class={`${prefixCls}-item-content`}>
-          {this.$slots.default && this.$slots.default()}
-        </div>
+        <div class={`${prefixCls}-item-content`}>{this.$slots.default?.()}</div>
       </li>
     );
   },
diff --git a/components/vc-menu/FunctionProvider.jsx b/components/vc-menu/FunctionProvider.jsx
index 96d6d87f6..a7704ac47 100644
--- a/components/vc-menu/FunctionProvider.jsx
+++ b/components/vc-menu/FunctionProvider.jsx
@@ -10,7 +10,7 @@ const FunctionProvider = {
     if (props.injectExtraPropsKey) {
       provide(props.injectExtraPropsKey, reactive(attrs));
     }
-    return () => slots.default && slots.default();
+    return () => slots.default?.();
   },
 };
 
diff --git a/components/vc-resize-observer/index.jsx b/components/vc-resize-observer/index.jsx
index 640fa69bd..1dcdeebed 100644
--- a/components/vc-resize-observer/index.jsx
+++ b/components/vc-resize-observer/index.jsx
@@ -83,7 +83,7 @@ const VueResizeObserver = defineComponent({
   },
 
   render() {
-    return this.$slots.default && this.$slots.default()[0];
+    return this.$slots.default?.()[0];
   },
 });
 
diff --git a/components/vc-select/TransBtn.tsx b/components/vc-select/TransBtn.tsx
index 2d37983b7..7ea2acc59 100644
--- a/components/vc-select/TransBtn.tsx
+++ b/components/vc-select/TransBtn.tsx
@@ -40,7 +40,7 @@ const TransBtn = (props: TransBtnProps, { slots }: SetupContext) => {
         icon
       ) : (
         <span class={className.split(/\s+/).map((cls: any) => `${cls}-icon`)}>
-          {slots.default && slots.default()}
+          {slots.default?.()}
         </span>
       )}
     </span>
diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx
index 705878a95..0c64d1a14 100644
--- a/components/vc-trigger/Popup.jsx
+++ b/components/vc-trigger/Popup.jsx
@@ -246,7 +246,7 @@ export default {
                 align={align}
                 onAlign={this.onAlign}
               >
-                <PopupInner {...popupInnerProps}>{$slots.default && $slots.default()}</PopupInner>
+                <PopupInner {...popupInnerProps}>{$slots.default?.()}</PopupInner>
               </Align>
             ) : null}
           </Transition>
diff --git a/components/vc-trigger/PopupInner.jsx b/components/vc-trigger/PopupInner.jsx
index 6b6d7249d..c44d1a189 100644
--- a/components/vc-trigger/PopupInner.jsx
+++ b/components/vc-trigger/PopupInner.jsx
@@ -13,7 +13,7 @@ export default {
     return (
       <div class={!visible ? hiddenClassName : ''}>
         <LazyRenderBox class={`${prefixCls}-content`} visible={visible}>
-          {this.$slots.default && this.$slots.default()}
+          {this.$slots.default?.()}
         </LazyRenderBox>
       </div>
     );