fix: change the prop className of the Layout and others to the last (#21041)

* className to be the last

* snapshot

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -232,7 +232,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
     </div>
   </aside>
   <section
-    class="site-layout ant-layout"
+    class="ant-layout site-layout"
   >
     <header
       class="site-layout-background ant-layout-header"
@@ -709,7 +709,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
     </div>
   </aside>
   <section
-    class="site-layout ant-layout"
+    class="ant-layout site-layout"
     style="margin-left:200px"
   >
     <header
@@ -1218,7 +1218,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
     </div>
   </aside>
   <section
-    class="site-layout ant-layout"
+    class="ant-layout site-layout"
   >
     <header
       class="site-layout-background ant-layout-header"
@@ -1276,7 +1276,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
 
 exports[`renders ./components/layout/demo/top.md correctly 1`] = `
 <section
-  class="layout ant-layout"
+  class="ant-layout layout"
 >
   <header
     class="ant-layout-header"
@@ -1594,7 +1594,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       </span>
     </div>
     <section
-      class="site-layout-background ant-layout"
+      class="ant-layout site-layout-background"
       style="padding:24px 0"
     >
       <aside

components/layout/layout.tsx

@@ -84,11 +84,15 @@ class BasicLayout extends React.Component<BasicPropsWithTagName, BasicLayoutStat
 
   renderComponent = ({ direction }: ConfigConsumerProps) => {
     const { prefixCls, className, children, hasSider, tagName: Tag, ...others } = this.props;
-    const classString = classNames(className, prefixCls, {
-      [`${prefixCls}-has-sider`]:
-        typeof hasSider === 'boolean' ? hasSider : this.state.siders.length > 0,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const classString = classNames(
+      prefixCls,
+      {
+        [`${prefixCls}-has-sider`]:
+          typeof hasSider === 'boolean' ? hasSider : this.state.siders.length > 0,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     return (
       <LayoutContext.Provider value={{ siderHook: this.getSiderHook() }}>