From 34ebd5508265acb083f6c7bebbc90bf763865b59 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Fri, 8 Apr 2022 10:04:31 +0800
Subject: [PATCH] refactor(style): destructuring style change to array (#5451)

---
 components/alert/index.tsx                   |  2 +-
 components/avatar/Avatar.tsx                 |  6 +-----
 components/input/ResizableTextArea.tsx       | 14 +++++++-------
 components/layout/Sider.tsx                  | 16 +++++++++-------
 components/tabs/src/TabPanelList/TabPane.tsx |  2 +-
 components/vc-slider/src/Handle.tsx          |  7 ++-----
 components/vc-trigger/Popup/PopupInner.tsx   | 17 ++++++++++-------
 7 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 6c6b0d3d8..714926af0 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -168,7 +168,7 @@ const Alert = defineComponent({
           <div
             role="alert"
             {...attrs}
-            style={{ ...(attrs.style as Object), ...motionStyle.value }}
+            style={[attrs.style, motionStyle.value]}
             v-show={!closing.value}
             class={[attrs.class, alertCls]}
             data-show={!closing.value}
diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
index 157f53d40..beae00913 100644
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -203,11 +203,7 @@ const Avatar = defineComponent({
           {...attrs}
           ref={avatarNodeRef}
           class={classString}
-          style={{
-            ...sizeStyle,
-            ...responsiveSizeStyle(!!icon),
-            ...(attrs.style as CSSProperties),
-          }}
+          style={[sizeStyle, responsiveSizeStyle(!!icon), attrs.style]}
         >
           {childrenToRender}
         </span>
diff --git a/components/input/ResizableTextArea.tsx b/components/input/ResizableTextArea.tsx
index d42c53ce8..49e6b16e1 100644
--- a/components/input/ResizableTextArea.tsx
+++ b/components/input/ResizableTextArea.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, VNode } from 'vue';
+import type { VNode } from 'vue';
 import {
   onMounted,
   getCurrentInstance,
@@ -110,13 +110,13 @@ const ResizableTextArea = defineComponent({
       const cls = classNames(prefixCls, attrs.class, {
         [`${prefixCls}-disabled`]: disabled,
       });
-      const style = {
-        ...(attrs.style as CSSProperties),
-        ...textareaStyles.value,
-        ...(resizeStatus.value === RESIZE_STATUS_RESIZING
+      const style = [
+        attrs.style,
+        textareaStyles.value,
+        resizeStatus.value === RESIZE_STATUS_RESIZING
           ? { overflowX: 'hidden', overflowY: 'hidden' }
-          : null),
-      };
+          : null,
+      ];
       const textareaProps: any = {
         ...otherProps,
         ...attrs,
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index d65859394..40987499d 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -193,13 +193,15 @@ export default defineComponent({
               </div>
             )
           : null;
-      const divStyle = {
-        ...(attrs.style as CSSProperties),
-        flex: `0 0 ${siderWidth}`,
-        maxWidth: siderWidth, // Fix width transition bug in IE11
-        minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
-        width: siderWidth,
-      };
+      const divStyle = [
+        attrs.style,
+        {
+          flex: `0 0 ${siderWidth}`,
+          maxWidth: siderWidth, // Fix width transition bug in IE11
+          minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
+          width: siderWidth,
+        },
+      ];
       const siderCls = classNames(
         pre,
         `${pre}-${theme}`,
diff --git a/components/tabs/src/TabPanelList/TabPane.tsx b/components/tabs/src/TabPanelList/TabPane.tsx
index 69980ae59..bfc21b954 100644
--- a/components/tabs/src/TabPanelList/TabPane.tsx
+++ b/components/tabs/src/TabPanelList/TabPane.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
           tabindex={active ? 0 : -1}
           aria-labelledby={id && `${id}-tab-${tabKey}`}
           aria-hidden={!active}
-          style={{ ...mergedStyle.value, ...(attrs.style as any) }}
+          style={[mergedStyle.value, attrs.style]}
           class={[`${prefixCls}-tabpane`, active && `${prefixCls}-tabpane-active`, attrs.class]}
         >
           {(active || visited.value || forceRender) && slots.default?.()}
diff --git a/components/vc-slider/src/Handle.tsx b/components/vc-slider/src/Handle.tsx
index 52dbcf2a3..8df7ad5dc 100644
--- a/components/vc-slider/src/Handle.tsx
+++ b/components/vc-slider/src/Handle.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, PropType } from 'vue';
+import type { PropType } from 'vue';
 import { computed, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import classNames from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
@@ -108,10 +108,7 @@ export default defineComponent({
         'aria-valuenow': value,
         'aria-disabled': !!disabled,
       };
-      const elStyle = {
-        ...(attrs.style as CSSProperties),
-        ...positionStyle.value,
-      };
+      const elStyle = [attrs.style, positionStyle.value];
       let mergedTabIndex = tabindex || 0;
       if (disabled || tabindex === null) {
         mergedTabIndex = null;
diff --git a/components/vc-trigger/Popup/PopupInner.tsx b/components/vc-trigger/Popup/PopupInner.tsx
index e19f4acaf..e30e5bf7c 100644
--- a/components/vc-trigger/Popup/PopupInner.tsx
+++ b/components/vc-trigger/Popup/PopupInner.tsx
@@ -144,13 +144,16 @@ export default defineComponent({
       } = props as PopupInnerProps;
       const statusValue = status.value;
       // ======================== Render ========================
-      const mergedStyle: CSSProperties = {
-        ...stretchStyle.value,
-        zIndex,
-        opacity: statusValue === 'motion' || statusValue === 'stable' || !visible.value ? null : 0,
-        pointerEvents: statusValue === 'stable' ? null : 'none',
-        ...(attrs.style as object),
-      };
+      const mergedStyle: CSSProperties[] = [
+        {
+          ...stretchStyle.value,
+          zIndex,
+          opacity:
+            statusValue === 'motion' || statusValue === 'stable' || !visible.value ? null : 0,
+          pointerEvents: statusValue === 'stable' ? null : 'none',
+        },
+        attrs.style,
+      ];
 
       let childNode: any = flattenChildren(slots.default?.({ visible: props.visible }));