refactor(style): destructuring style change to array (#5451)

Author: buqiyuan

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}

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>

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,

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}`,

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?.()}

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;

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