refactor: inline-style to cssinjs (#51843)

* refactor: inline-style to cssinjs

* fix: fix test case

* fix: fix

* Update components/upload/Upload.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* rename

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>

components/form/__tests__/__snapshots__/index.test.tsx.snap

@@ -941,8 +941,7 @@ exports[`Form form should support disabled 1`] = `
               class="ant-upload-wrapper"
             >
               <div
-                class="ant-upload ant-upload-select ant-upload-disabled"
+                class="ant-upload ant-upload-select ant-upload-disabled ant-upload-hidden"
-                style="display: none;"
               >
                 <span
                   class="ant-upload ant-upload-disabled"

components/upload/Upload.tsx

@@ -469,12 +469,13 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     );
   }
 
-  const uploadButtonCls = classNames(prefixCls, `${prefixCls}-select`, {
+  const uploadBtnCls = classNames(prefixCls, `${prefixCls}-select`, {
     [`${prefixCls}-disabled`]: mergedDisabled,
+    [`${prefixCls}-hidden`]: !children,
   });
 
   const uploadButton = (
-    <div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
+    <div className={uploadBtnCls}>
       <RcUpload {...rcUploadProps} ref={upload} />
     </div>
   );

components/upload/__tests__/__snapshots__/upload.test.tsx.snap

@@ -5,8 +5,7 @@ exports[`Upload rtl render component should be rendered correctly in RTL directi
   class="ant-upload-wrapper ant-upload-rtl"
 >
   <div
-    class="ant-upload ant-upload-select"
+    class="ant-upload ant-upload-select ant-upload-hidden"
-    style="display: none;"
   >
     <span
       class="ant-upload"

components/upload/__tests__/uploadlist.test.tsx

@@ -75,10 +75,7 @@ describe('Upload List', () => {
     mockHeightGet.mockImplementation(() => size.height);
     mockSrcSet.mockImplementation(function fn() {
       // @ts-ignore
-      if (this.onload) {
+      this.onload?.();
-        // @ts-ignore
-        this.onload();
-      }
     });
 
     mockGetCanvasContext.mockReturnValue({
@@ -1629,8 +1626,8 @@ describe('Upload List', () => {
         <Upload fileList={list as UploadProps['defaultFileList']} listType="picture-card" />,
       );
       expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
-      expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
+      expect(wrapper.querySelector<HTMLDivElement>('.ant-upload-select')).toHaveClass(
-        'none',
+        'ant-upload-hidden',
       );
       unmount();
     });
@@ -1654,8 +1651,8 @@ describe('Upload List', () => {
         />,
       );
       expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
-      expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
+      expect(wrapper.querySelector<HTMLDivElement>('.ant-upload-select')).toHaveClass(
-        'none',
+        'ant-upload-hidden',
       );
       unmount();
     });

components/upload/style/index.ts

@@ -40,6 +40,10 @@ const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
         display: 'inline-block',
       },
 
+      [`${componentCls}-hidden`]: {
+        display: 'none',
+      },
+
       [`${componentCls}-disabled`]: {
         color: colorTextDisabled,
         cursor: 'not-allowed',