diff --git a/components/back-top/__tests__/__snapshots__/demo.test.js.snap b/components/back-top/__tests__/__snapshots__/demo.test.js.snap
index f7c7a9f5e7..44c4f665ef 100644
--- a/components/back-top/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/back-top/__tests__/__snapshots__/demo.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
 <div>
   Scroll down to see the bottom-right
   <strong
-    style="color:rgba(64, 64, 64, 0.6)"
+    class="site-back-top-basic"
   >
      gray 
   </strong>
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index b08dc15c4f..abd66424b4 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1306,12 +1306,11 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
   >
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset"
       title="4"
     >
       <span
@@ -1472,7 +1471,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
   >
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index f520e7f46f..2794f1b29e 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -232,7 +232,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     </span>
   </button>
   <div
-    style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
+    class="site-button-ghost-wrapper"
   >
     <button
       class="ant-btn ant-btn-background-ghost"
@@ -257,7 +257,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 
 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 <div
-  style="background:rgb(190, 200, 200);padding:26px 16px 16px"
+  class="site-button-ghost-wrapper"
 >
   <button
     class="ant-btn ant-btn-primary ant-btn-background-ghost"
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
index 93d54b0633..7601b08d80 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -952,7 +952,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 <div
-  style="width:300px;border:1px solid #f0f0f0;border-radius:4px"
+  class="site-calendar-demo-card"
 >
   <div
     class="ant-picker-calendar ant-picker-calendar-mini"
@@ -1906,7 +1906,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 
 exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = `
 <div
-  style="width:300px;border:1px solid #d9d9d9;border-radius:4px"
+  class="site-calendar-customize-header-wrapper"
 >
   <div
     class="ant-picker-calendar ant-picker-calendar-mini"
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index ea5239d1ea..bfed41c444 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -87,7 +87,7 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px"
+  class="site-card-border-less-wrapper"
 >
   <div
     class="ant-card"
@@ -229,7 +229,7 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
 
 exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px"
+  class="site-card-wrapper"
 >
   <div
     class="ant-row"
@@ -341,7 +341,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
     class="ant-card-body"
   >
     <p
-      style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500"
+      class="site-card-demo-inner-p"
     >
       Group title
     </p>
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
index 7e97524324..244bfff7fc 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -24,7 +24,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
 exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
 <div>
   <div
-    style="border-bottom:1px solid #E9E9E9"
+    class="site-checkbox-all-wrapper"
   >
     <label
       class="ant-checkbox-wrapper"
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
index 73f717a11b..e83fec816d 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -342,11 +342,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
 
 exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left site-collapse-custom-collapse"
 >
   <div
-    class="ant-collapse-item ant-collapse-item-active"
-    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
+    class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
   >
     <div
       aria-expanded="true"
@@ -394,8 +393,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-collapse-item"
-    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
+    class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
       aria-expanded="false"
@@ -427,8 +425,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-collapse-item"
-    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
+    class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
       aria-expanded="false"
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
index 5cfdc2a105..a3734787ec 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
@@ -160,7 +160,7 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 
 exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
 <div
-  style="height:200px;overflow:hidden;position:relative;border:1px solid #ebedf0;border-radius:2px;padding:48px;text-align:center;background:#fafafa"
+  class="site-drawer-render-in-current-wrapper"
 >
   Render in this
   <div
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 6ef7656803..23ef430604 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -31,8 +31,8 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 <div
-  class="ant-dropdown-trigger"
-  style="text-align:center;background:#f7f7f7;height:200px;line-height:200px;color:#777"
+  class="site-dropdown-context-menu ant-dropdown-trigger"
+  style="text-align:center;height:200px;line-height:200px"
 >
   Right Click on here
 </div>
diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
index a8ca862e5a..32cd6b454b 100644
--- a/components/empty/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -753,7 +753,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
   >
     <img
       alt="empty"
-      src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+      src="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/ncyfsLONGK/empty.svg"
     />
   </div>
   <p
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index b4b4247f32..904c5132d3 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1252,9 +1252,8 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
           >
             <span
               aria-label="user"
-              class="anticon anticon-user"
+              class="anticon anticon-user site-form-item-icon"
               role="img"
-              style="color:rgba(0,0,0,.25)"
             >
               <svg
                 aria-hidden="true"
@@ -1300,9 +1299,8 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
           >
             <span
               aria-label="lock"
-              class="anticon anticon-lock"
+              class="anticon anticon-lock site-form-item-icon"
               role="img"
-              style="color:rgba(0,0,0,.25)"
             >
               <svg
                 aria-hidden="true"
@@ -1788,9 +1786,8 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           >
             <span
               aria-label="user"
-              class="anticon anticon-user"
+              class="anticon anticon-user site-form-item-icon"
               role="img"
-              style="color:rgba(0,0,0,.25)"
             >
               <svg
                 aria-hidden="true"
@@ -1836,9 +1833,8 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           >
             <span
               aria-label="lock"
-              class="anticon anticon-lock"
+              class="anticon anticon-lock site-form-item-icon"
               role="img"
-              style="color:rgba(0,0,0,.25)"
             >
               <svg
                 aria-hidden="true"
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap
index bf91fbefe4..d375cc454e 100644
--- a/components/input-number/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input-number/__tests__/__snapshots__/demo.test.js.snap
@@ -427,7 +427,9 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 `;
 
 exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
-<div>
+<div
+  class="site-input-number-wrapper"
+>
   <div
     class="ant-input-number ant-input-number-lg"
   >
diff --git a/components/input/__tests__/__snapshots__/Password.test.js.snap b/components/input/__tests__/__snapshots__/Password.test.js.snap
index cdad422b14..414411a4ba 100644
--- a/components/input/__tests__/__snapshots__/Password.test.js.snap
+++ b/components/input/__tests__/__snapshots__/Password.test.js.snap
@@ -66,7 +66,7 @@ exports[`Input.Password should change type when click 1`] = `
             onClick={[Function]}
             onMouseDown={[Function]}
           >
-            <AntdIcon
+            <ForwardRef(AntdIcon)
               className="ant-input-password-icon"
               icon={
                 Object {
@@ -158,7 +158,7 @@ exports[`Input.Password should change type when click 1`] = `
                   </svg>
                 </IconReact>
               </span>
-            </AntdIcon>
+            </ForwardRef(AntdIcon)>
           </EyeInvisibleOutlined>
         </span>
       </span>
@@ -233,7 +233,7 @@ exports[`Input.Password should change type when click 2`] = `
             onClick={[Function]}
             onMouseDown={[Function]}
           >
-            <AntdIcon
+            <ForwardRef(AntdIcon)
               className="ant-input-password-icon"
               icon={
                 Object {
@@ -309,7 +309,7 @@ exports[`Input.Password should change type when click 2`] = `
                   </svg>
                 </IconReact>
               </span>
-            </AntdIcon>
+            </ForwardRef(AntdIcon)>
           </EyeOutlined>
         </span>
       </span>
@@ -384,7 +384,7 @@ exports[`Input.Password should change type when click 3`] = `
             onClick={[Function]}
             onMouseDown={[Function]}
           >
-            <AntdIcon
+            <ForwardRef(AntdIcon)
               className="ant-input-password-icon"
               icon={
                 Object {
@@ -476,7 +476,7 @@ exports[`Input.Password should change type when click 3`] = `
                   </svg>
                 </IconReact>
               </span>
-            </AntdIcon>
+            </ForwardRef(AntdIcon)>
           </EyeInvisibleOutlined>
         </span>
       </span>
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 6a15ce5b8a..16eba31dd6 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -945,7 +945,9 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/input/demo/group.md correctly 1`] = `
-<div>
+<div
+  class="site-input-group-wrapper"
+>
   <span
     class="ant-input-group ant-input-group-lg"
   >
@@ -1443,10 +1445,10 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       value=""
     />
     <input
-      class="ant-input ant-input-disabled"
+      class="ant-input ant-input-disabled site-input-split"
       disabled=""
       placeholder="~"
-      style="width:30px;border-left:0;pointer-events:none;background-color:#fff"
+      style="width:30px;border-left:0;border-right:0;pointer-events:none"
       type="text"
       value=""
     />
@@ -1705,9 +1707,8 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
     >
       <span
         aria-label="user"
-        class="anticon anticon-user"
+        class="anticon anticon-user site-form-item-icon"
         role="img"
-        style="color:rgba(0,0,0,.25)"
       >
         <svg
           aria-hidden="true"
diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
index 7e635870a5..1b3c1ef644 100644
--- a/components/input/__tests__/__snapshots__/index.test.js.snap
+++ b/components/input/__tests__/__snapshots__/index.test.js.snap
@@ -40,7 +40,7 @@ exports[`Input allowClear should change type when click 1`] = `
           onClick={[Function]}
           role="button"
         >
-          <AntdIcon
+          <ForwardRef(AntdIcon)
             className="ant-input-clear-icon"
             icon={
               Object {
@@ -115,7 +115,7 @@ exports[`Input allowClear should change type when click 1`] = `
                 </svg>
               </IconReact>
             </span>
-          </AntdIcon>
+          </ForwardRef(AntdIcon)>
         </CloseCircleFilled>
       </span>
     </span>
@@ -512,7 +512,7 @@ exports[`Input.Search should support suffix 1`] = `
             key="searchIcon"
             onClick={[Function]}
           >
-            <AntdIcon
+            <ForwardRef(AntdIcon)
               className="ant-input-search-icon"
               icon={
                 Object {
@@ -586,7 +586,7 @@ exports[`Input.Search should support suffix 1`] = `
                   </svg>
                 </IconReact>
               </span>
-            </AntdIcon>
+            </ForwardRef(AntdIcon)>
           </SearchOutlined>
         </span>
       </span>
@@ -643,7 +643,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
         onClick={[Function]}
         role="button"
       >
-        <AntdIcon
+        <ForwardRef(AntdIcon)
           className="ant-input-textarea-clear-icon"
           icon={
             Object {
@@ -718,7 +718,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
               </svg>
             </IconReact>
           </span>
-        </AntdIcon>
+        </ForwardRef(AntdIcon)>
       </CloseCircleFilled>
     </span>
   </ClearableLabeledInput>
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index ee2265342e..c7056e19e7 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -235,8 +235,8 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
     class="ant-layout"
   >
     <header
-      class="ant-layout-header"
-      style="background:#fff;padding:0"
+      class="site-layout-background ant-layout-header"
+      style="padding:0"
     >
       <span
         aria-label="menu-fold"
@@ -261,8 +261,8 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
       </span>
     </header>
     <main
-      class="ant-layout-content"
-      style="margin:24px 16px;padding:24px;background:#fff;min-height:280px"
+      class="site-layout-background ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px"
     >
       Content
     </main>
@@ -978,15 +978,16 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
     class="ant-layout"
   >
     <header
-      class="ant-layout-header"
-      style="background:#fff;padding:0"
+      class="site-layout-header-background ant-layout-header"
+      style="padding:0"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
       <div
-        style="padding:24px;background:#fff;min-height:360px"
+        class="site-layout-background"
+        style="padding:24px;min-height:360px"
       >
         content
       </div>
@@ -1423,7 +1424,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
       </span>
     </div>
     <div
-      style="background:#fff;padding:24px;min-height:280px"
+      class="site-layout-content"
     >
       Content
     </div>
@@ -1590,12 +1591,12 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       </span>
     </div>
     <section
-      class="ant-layout"
-      style="padding:24px 0;background:#fff"
+      class="site-layout-background ant-layout"
+      style="padding:24px 0"
     >
       <aside
-        class="ant-layout-sider ant-layout-sider-dark"
-        style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="site-layout-background ant-layout-sider ant-layout-sider-dark"
+        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
           class="ant-layout-sider-children"
@@ -1887,8 +1888,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
     class="ant-layout"
   >
     <aside
-      class="ant-layout-sider ant-layout-sider-dark"
-      style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="site-layout-background ant-layout-sider ant-layout-sider-dark"
+      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -2098,8 +2099,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
         </span>
       </div>
       <main
-        class="ant-layout-content"
-        style="background:#fff;padding:24px;margin:0;min-height:280px"
+        class="site-layout-background ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px"
       >
         Content
       </main>
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index ec19f7c1b6..a1c759703a 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -3,8 +3,7 @@
 exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 <div>
   <div
-    class="ant-page-header ant-page-header-ghost"
-    style="border:1px solid rgb(235, 237, 240)"
+    class="ant-page-header site-page-header ant-page-header-ghost"
   >
     <div
       class="ant-page-header-heading"
@@ -366,8 +365,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
 <div
-  class="ant-page-header ant-page-header-ghost"
-  style="border:1px solid rgb(235, 237, 240)"
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
   <div
     class="ant-page-header-heading"
@@ -420,8 +418,7 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb ant-page-header-ghost"
-  style="border:1px solid rgb(235, 237, 240)"
+  class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
 >
   <div
     class="ant-breadcrumb"
@@ -492,8 +489,7 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb ant-page-header-ghost"
-  style="border:1px solid rgb(235, 237, 240)"
+  class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
 >
   <div
     class="ant-breadcrumb"
@@ -691,11 +687,11 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
       </div>
       <div
         class="extra"
-        style="margin-left:80px"
+        style="margin-left:80px;margin-top:16px"
       >
         <img
           alt="content"
-          src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
+          src="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/YZUAr4NUNC/pageHeader.svg"
         />
       </div>
     </div>
@@ -705,7 +701,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 
 exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
 <div
-  style="background-color:#F5F5F5;padding:24px"
+  class="site-page-header-ghost-wrapper"
 >
   <div
     class="ant-page-header"
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index 5476591114..745a058cb9 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -1395,11 +1395,11 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <span
         class="ant-progress-text"
@@ -1422,19 +1422,19 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:#f3f3f3;width:14px;height:8px"
+        style="background-color:undefined;width:14px;height:8px"
       />
       <span
         class="ant-progress-text"
diff --git a/components/result/__tests__/__snapshots__/demo.test.js.snap b/components/result/__tests__/__snapshots__/demo.test.js.snap
index 471850819a..11817b1fa5 100644
--- a/components/result/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/result/__tests__/__snapshots__/demo.test.js.snap
@@ -1131,9 +1131,8 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
       >
         <span
           aria-label="close-circle"
-          class="anticon anticon-close-circle"
+          class="anticon anticon-close-circle site-result-demo-error-icon"
           role="img"
-          style="color:red"
         >
           <svg
             aria-hidden="true"
@@ -1163,9 +1162,8 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
       >
         <span
           aria-label="close-circle"
-          class="anticon anticon-close-circle"
+          class="anticon anticon-close-circle site-result-demo-error-icon"
           role="img"
-          style="color:red"
         >
           <svg
             aria-hidden="true"
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.js.snap b/components/statistic/__tests__/__snapshots__/demo.test.js.snap
index 2dce7ec42a..9f64e18211 100644
--- a/components/statistic/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/statistic/__tests__/__snapshots__/demo.test.js.snap
@@ -78,7 +78,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px"
+  class="site-statistic-demo-card"
 >
   <div
     class="ant-row"
diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 55b9278cfa..cf1e09a1b3 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -733,8 +733,7 @@ exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
 exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
 <div>
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
-    style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
+    class="ant-steps ant-steps-horizontal site-navigation-steps ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
   >
     <div
       class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
@@ -883,8 +882,7 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
-    style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
+    class="ant-steps ant-steps-horizontal site-navigation-steps ant-steps-label-horizontal ant-steps-navigation"
   >
     <div
       class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
@@ -1031,8 +1029,7 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
-    style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
+    class="ant-steps ant-steps-horizontal site-navigation-steps ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
   >
     <div
       class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index dcabe8d9db..2b5b248a3c 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -696,9 +696,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
     <div>
       <div />
       <div
-        class="ant-tabs-bar ant-tabs-top-bar"
+        class="ant-tabs-bar site-custom-tab-bar"
         role="tablist"
-        style="z-index:1;background:#fff"
         tabindex="0"
       >
         <div
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index 1162c5f3dd..166ad3fb3c 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -99,8 +99,7 @@ exports[`renders ./components/tag/demo/animation.md correctly 1`] = `
     </div>
   </div>
   <span
-    class="ant-tag"
-    style="background:#fff;border-style:dashed"
+    class="ant-tag site-tag-plus"
   >
     <span
       aria-label="plus"
@@ -380,8 +379,7 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     </span>
   </span>
   <span
-    class="ant-tag"
-    style="background:#fff;border-style:dashed"
+    class="ant-tag site-tag-plus"
   >
     <span
       aria-label="plus"
diff --git a/components/transfer/__tests__/__snapshots__/index.test.js.snap b/components/transfer/__tests__/__snapshots__/index.test.js.snap
index 826730f65c..73a69075eb 100644
--- a/components/transfer/__tests__/__snapshots__/index.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/index.test.js.snap
@@ -714,7 +714,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                 type="button"
               >
                 <RightOutlined>
-                  <AntdIcon
+                  <ForwardRef(AntdIcon)
                     icon={
                       Object {
                         "icon": Object {
@@ -784,7 +784,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                         </svg>
                       </IconReact>
                     </span>
-                  </AntdIcon>
+                  </ForwardRef(AntdIcon)>
                 </RightOutlined>
               </button>
             </Wave>
@@ -808,7 +808,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                 type="button"
               >
                 <LeftOutlined>
-                  <AntdIcon
+                  <ForwardRef(AntdIcon)
                     icon={
                       Object {
                         "icon": Object {
@@ -878,7 +878,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                         </svg>
                       </IconReact>
                     </span>
-                  </AntdIcon>
+                  </ForwardRef(AntdIcon)>
                 </LeftOutlined>
               </button>
             </Wave>
diff --git a/components/transfer/__tests__/__snapshots__/search.test.js.snap b/components/transfer/__tests__/__snapshots__/search.test.js.snap
index 759d715e23..ed9fc28531 100644
--- a/components/transfer/__tests__/__snapshots__/search.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/search.test.js.snap
@@ -45,7 +45,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
       className="undefined-action"
     >
       <SearchOutlined>
-        <AntdIcon
+        <ForwardRef(AntdIcon)
           icon={
             Object {
               "icon": Object {
@@ -115,7 +115,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
               </svg>
             </IconReact>
           </span>
-        </AntdIcon>
+        </ForwardRef(AntdIcon)>
       </SearchOutlined>
     </span>
   </div>
@@ -169,7 +169,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
       onClick={[Function]}
     >
       <CloseCircleFilled>
-        <AntdIcon
+        <ForwardRef(AntdIcon)
           icon={
             Object {
               "icon": Object {
@@ -239,7 +239,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
               </svg>
             </IconReact>
           </span>
-        </AntdIcon>
+        </ForwardRef(AntdIcon)>
       </CloseCircleFilled>
     </a>
   </div>
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index a4be338499..cfdd930afd 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -2256,7 +2256,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
               >
                 <span>
                   <span
-                    style="color:#f50"
+                    class="site-tree-search-value"
                   />
                   0-0
                 </span>
@@ -2299,7 +2299,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
               >
                 <span>
                   <span
-                    style="color:#f50"
+                    class="site-tree-search-value"
                   />
                   0-1
                 </span>
@@ -2321,7 +2321,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
               >
                 <span>
                   <span
-                    style="color:#f50"
+                    class="site-tree-search-value"
                   />
                   0-2
                 </span>