fix: adjust the order of QRCode style prop (#48053)

* fix: adjust the order of style prop

* test: update snap

* test: add test case

components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -211,7 +211,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
 >
   <div
     class="ant-qrcode"
-    style="margin-bottom: 16px; width: 160px; height: 160px; background-color: rgb(255, 255, 255);"
+    style="width: 160px; height: 160px; background-color: rgb(255, 255, 255); margin-bottom: 16px;"
   >
     <canvas
       height="160"
@@ -235,7 +235,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
 Array [
   <div
     class="ant-qrcode"
-    style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
+    style="width: 160px; height: 160px; background-color: transparent; margin-bottom: 16px;"
   >
     <canvas
       height="160"

components/qr-code/__tests__/__snapshots__/demo.test.ts.snap

@@ -169,7 +169,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
 >
   <div
     class="ant-qrcode"
-    style="margin-bottom:16px;width:160px;height:160px;background-color:#fff"
+    style="width:160px;height:160px;background-color:#fff;margin-bottom:16px"
   >
     <canvas
       height="160"
@@ -191,7 +191,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-qrcode"
-    style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
+    style="width:160px;height:160px;background-color:transparent;margin-bottom:16px"
   >
     <canvas
       height="160"

components/qr-code/__tests__/index.test.tsx

@@ -87,4 +87,11 @@ describe('QRCode test', () => {
     );
     errSpy.mockRestore();
   });
+
+  it('correct style order', () => {
+    const { container } = render(<QRCode value="test" size={80} style={{ width: 100 }} />);
+    expect(container.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveStyle(
+      'width: 100px; height: 80px',
+    );
+  });
 });

components/qr-code/demo/customSize.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { QRCode, Button } from 'antd';
+import { Button, QRCode } from 'antd';
+
+const MIN_SIZE = 48;
+const MAX_SIZE = 300;
 
 const App: React.FC = () => {
   const [size, setSize] = useState<number>(160);
@@ -8,8 +11,8 @@ const App: React.FC = () => {
   const increase = () => {
     setSize((prevSize) => {
       const newSize = prevSize + 10;
-      if (newSize > 300) {
-        return 300;
+      if (newSize >= MAX_SIZE) {
+        return MAX_SIZE;
       }
       return newSize;
     });
@@ -18,8 +21,8 @@ const App: React.FC = () => {
   const decline = () => {
     setSize((prevSize) => {
       const newSize = prevSize - 10;
-      if (newSize < 48) {
-        return 48;
+      if (newSize <= MIN_SIZE) {
+        return MIN_SIZE;
       }
       return newSize;
     });
@@ -28,10 +31,10 @@ const App: React.FC = () => {
   return (
     <>
       <Button.Group style={{ marginBottom: 16 }}>
-        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
+        <Button onClick={decline} disabled={size <= MIN_SIZE} icon={<MinusOutlined />}>
           Smaller
         </Button>
-        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
+        <Button onClick={increase} disabled={size >= MAX_SIZE} icon={<PlusOutlined />}>
           Larger
         </Button>
       </Button.Group>

components/qr-code/index.tsx

@@ -78,11 +78,15 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     [`${prefixCls}-borderless`]: !bordered,
   });
 
+  const mergedStyle: React.CSSProperties = {
+    width: size,
+    height: size,
+    backgroundColor: bgColor,
+    ...style,
+  };
+
   return wrapCSSVar(
-    <div
-      className={mergedCls}
-      style={{ ...style, width: size, height: size, backgroundColor: bgColor }}
-    >
+    <div className={mergedCls} style={mergedStyle}>
       {status !== 'active' && (
         <div className={`${prefixCls}-mask`}>
           {status === 'loading' && <Spin />}