From 6f18ef7a31373d160712921ce38c2ce6c06a8b17 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Sun, 9 Oct 2022 16:59:11 +0800
Subject: [PATCH] chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore
---
 .eslintignore                                 |   5 +-
 .github/workflows/test.yml                    |  22 ---
 .jest.js                                      |   2 +
 .surgeignore                                  |   1 +
 .umirc.ts                                     |   1 +
 components/__tests__/node.test.tsx            |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  75 ++-------
 .../__tests__/__snapshots__/demo.test.ts.snap |  75 ++-------
 .../alert/__tests__/demo-extend.test.ts       |   2 +-
 components/alert/__tests__/demo.test.ts       |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  12 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  12 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  16 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  28 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  28 ++--
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 .../breadcrumb/__tests__/demo-extend.test.ts  |   2 +-
 components/breadcrumb/__tests__/demo.test.ts  |   2 +-
 components/breadcrumb/__tests__/image.test.ts |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  22 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  22 +--
 components/button/__tests__/image.test.ts     |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  10 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  36 ++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  36 ++---
 .../cascader/demo/showCheckedStrategy.tsx     |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../config-provider/__tests__/image.test.ts   |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  38 ++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  38 ++---
 .../date-picker/__tests__/demo-extend.test.ts |   2 +-
 components/date-picker/__tests__/demo.test.ts |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  16 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 .../__snapshots__/demo-extend.test.tsx.snap   |  22 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  22 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  30 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  30 ++--
 components/dropdown/__tests__/image.test.ts   |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 components/empty/demo/basic.tsx               |   1 +
 components/empty/demo/description.tsx         |   1 +
 components/empty/demo/simple.tsx              |   1 +
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  16 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  64 ++++----
 .../__tests__/__snapshots__/demo.test.ts.snap | 147 ++++--------------
 components/form/__tests__/demo-extend.test.ts |   2 +-
 components/form/__tests__/demo.test.ts        |   2 +-
 components/form/__tests__/image.test.ts       |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  24 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  24 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 components/icon/__tests__/image.test.ts       |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../image/demo/preview-group-top-progress.tsx |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  28 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  28 ++--
 components/input-number/demo/debug-token.tsx  |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  40 ++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  40 ++---
 components/input/__tests__/image.test.ts      |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../layout/__tests__/demo-extend.test.ts      |   2 +-
 components/layout/__tests__/demo.test.ts      |   2 +-
 components/layout/__tests__/image.test.ts     |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 components/list/__tests__/image.test.ts       |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 components/menu/demo/deprecated.tsx           |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 components/message/demo/render-panel.tsx      |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  30 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  30 ++--
 components/modal/demo/dark.tsx                |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 components/notification/demo/render-panel.tsx |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  16 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  24 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  24 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  16 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  22 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  22 +--
 components/segmented/demo/basic.tsx           |   1 +
 components/segmented/demo/block.tsx           |   1 +
 components/segmented/demo/controlled-two.tsx  |   7 +-
 components/segmented/demo/custom.tsx          |   1 +
 components/segmented/demo/disabled.tsx        |   1 +
 components/segmented/demo/icon-only.tsx       |   1 +
 components/segmented/demo/size-consistent.tsx |   4 +-
 components/segmented/demo/size.tsx            |   1 +
 components/segmented/demo/with-icon.tsx       |   1 +
 .../__snapshots__/demo-extend.test.ts.snap    |  44 +++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  46 +++---
 .../select/__tests__/demo-extend.test.ts      |   2 +-
 components/select/__tests__/demo.test.ts      |   2 +-
 components/select/__tests__/image.test.ts     |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  12 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  12 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  72 ++-------
 components/slider/__tests__/demo.test.ts      |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   8 +-
 components/statistic/__tests__/image.test.ts  |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  32 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  32 ++--
 components/steps/__tests__/image.test.ts      |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 components/switch/__tests__/image.test.ts     |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  80 +++++-----
 .../__tests__/__snapshots__/demo.test.ts.snap |  80 +++++-----
 .../__snapshots__/demo-extend.test.ts.snap    |  34 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  34 ++--
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 components/tag/__tests__/image.test.ts        |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  28 ++--
 .../__tests__/__snapshots__/demo.test.ts.snap |  28 ++--
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 components/timeline/__tests__/image.test.ts   |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  14 +-
 components/tooltip/index.tsx                  |   3 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  20 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  20 +--
 components/tree/__tests__/demo-extend.test.ts |   2 +-
 components/tree/__tests__/demo.test.ts        |   2 +-
 components/tree/__tests__/image.test.ts       |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  38 ++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  38 ++---
 package.json                                  |  10 +-
 tests/shared/demoTest.tsx                     |   9 +-
 tests/shared/imageTest.tsx                    |   2 +-
 184 files changed, 1414 insertions(+), 1641 deletions(-)
 create mode 100644 .surgeignore

diff --git a/.eslintignore b/.eslintignore
index 12391cdd50..4691c01d71 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,7 +2,8 @@ components/**/*.js
 components/**/*.jsx
 components/version/token.tsx
 !components/*/__tests__/**/*.js
-!components/*/demo/*
+!components/*/demo/*.md
+components/*/demo/*.tsx
 !.*.js
 ~*
 # Docs templates
@@ -19,6 +20,8 @@ site/theme/template/Content/EditButton.jsx
 site/theme/template/Resources/*.jsx
 site/theme/template/Resources/**/*.jsx
 site/theme/template/NotFound.jsx
+site/theme/template/Content/ComponentDoc.jsx
+site/**/*.tsx
 typings
 es/**/*
 lib/**/*
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 1fc87e596f..d522526689 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -67,28 +67,6 @@ jobs:
         run: npm run lint
     needs: setup
 
-  tsx-demo:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: tsx-demo
-        run: npm run check-ts-demo
-    needs: setup
-
   check_metadata:
     runs-on: ubuntu-latest
     steps:
diff --git a/.jest.js b/.jest.js
index b9434c048d..0115fdb041 100644
--- a/.jest.js
+++ b/.jest.js
@@ -27,6 +27,8 @@ module.exports = {
     '/^react-dnd-test-backend$/': 'react-dnd-test-backend/dist/cjs',
     '/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
     '/\\.(css|less)$/': 'identity-obj-proxy',
+    '^antd$': '<rootDir>/components/index',
+    '^antd/es/(.*)$': '<rootDir>/components/$1',
   },
   testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
   transform: {
diff --git a/.surgeignore b/.surgeignore
new file mode 100644
index 0000000000..514190ab9d
--- /dev/null
+++ b/.surgeignore
@@ -0,0 +1 @@
+!.dumi*
diff --git a/.umirc.ts b/.umirc.ts
index 260586e0de..e18a128108 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -4,6 +4,7 @@ import rehypeAntd from './.dumi/rehypeAntd';
 import { version } from './package.json';
 
 export default defineConfig({
+  outputPath: '_site',
   resolve: {
     // FIXME: disable docs in temporary
     docDirs: [],
diff --git a/components/__tests__/node.test.tsx b/components/__tests__/node.test.tsx
index ff197dec83..41437d03e8 100644
--- a/components/__tests__/node.test.tsx
+++ b/components/__tests__/node.test.tsx
@@ -26,7 +26,7 @@ describe('node', () => {
 
     // Test for ssr
     describe(componentName, () => {
-      const demoList = glob.sync(`./components/${componentName}/demo/*.md`);
+      const demoList = glob.sync(`./components/${componentName}/demo/*.tsx`);
 
       // Use mock to get config
       require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2edf5200fb..7918167942 100644
--- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/affix/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/affix/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div>
     <div
@@ -34,7 +34,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/affix/demo/debug.md extend context correctly 1`] = `
+exports[`renders ./components/affix/demo/debug.tsx extend context correctly 1`] = `
 <div
   style="height: 10000px;"
 >
@@ -65,7 +65,7 @@ exports[`renders ./components/affix/demo/debug.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/affix/demo/on-change.md extend context correctly 1`] = `
+exports[`renders ./components/affix/demo/on-change.tsx extend context correctly 1`] = `
 <div>
   <div
     class=""
@@ -82,7 +82,7 @@ exports[`renders ./components/affix/demo/on-change.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/affix/demo/target.md extend context correctly 1`] = `
+exports[`renders ./components/affix/demo/target.tsx extend context correctly 1`] = `
 <div
   class="scrollable-container"
 >
diff --git a/components/affix/__tests__/__snapshots__/demo.test.ts.snap b/components/affix/__tests__/__snapshots__/demo.test.ts.snap
index 8cf91e371d..37f34a7490 100644
--- a/components/affix/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/affix/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
+exports[`renders ./components/affix/demo/basic.tsx correctly 1`] = `
 Array [
   <div>
     <div
@@ -34,7 +34,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
+exports[`renders ./components/affix/demo/debug.tsx correctly 1`] = `
 <div
   style="height: 10000px;"
 >
@@ -65,7 +65,7 @@ exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
+exports[`renders ./components/affix/demo/on-change.tsx correctly 1`] = `
 <div>
   <div
     class=""
@@ -82,7 +82,7 @@ exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/affix/demo/target.md correctly 1`] = `
+exports[`renders ./components/affix/demo/target.tsx correctly 1`] = `
 <div
   class="scrollable-container"
 >
diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
index 616c776b53..c6ca275596 100644
--- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/alert/demo/action.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success"
@@ -265,7 +265,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/banner.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
@@ -415,7 +415,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-alert ant-alert-success ant-alert-no-icon"
   data-show="true"
@@ -433,7 +433,7 @@ exports[`renders ./components/alert/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/alert/demo/closable.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
@@ -523,7 +523,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/close-text.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/close-text.tsx extend context correctly 1`] = `
 <div
   class="ant-alert ant-alert-info ant-alert-no-icon"
   data-show="true"
@@ -552,7 +552,7 @@ exports[`renders ./components/alert/demo/close-text.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/alert/demo/custom-icon.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -864,7 +864,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/description.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/description.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
@@ -949,7 +949,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/error-boundary.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
@@ -960,7 +960,7 @@ exports[`renders ./components/alert/demo/error-boundary.md extend context correc
 </button>
 `;
 
-exports[`renders ./components/alert/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success"
@@ -1307,60 +1307,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/loop-banner.md extend context correctly 1`] = `
-<div
-  class="ant-alert ant-alert-warning ant-alert-banner"
-  data-show="true"
-  role="alert"
->
-  <span
-    aria-label="exclamation-circle"
-    class="anticon anticon-exclamation-circle ant-alert-icon"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="exclamation-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-      />
-    </svg>
-  </span>
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      <div
-        class=" marquee-container"
-        style="--pause-on-hover: paused; --pause-on-click: running;"
-      >
-        <div
-          class="marquee"
-          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
-        >
-          I can be a React component, multiple React components, or just some text.
-        </div>
-        <div
-          class="marquee"
-          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
-        >
-          I can be a React component, multiple React components, or just some text.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/smooth-closed.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -1408,7 +1355,7 @@ exports[`renders ./components/alert/demo/smooth-closed.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/alert/demo/style.md extend context correctly 1`] = `
+exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
index e6e5349da3..5d8d3983f5 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/alert/demo/action.md correctly 1`] = `
+exports[`renders ./components/alert/demo/action.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success"
@@ -265,7 +265,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
+exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
@@ -415,7 +415,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
+exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-alert ant-alert-success ant-alert-no-icon"
   data-show="true"
@@ -433,7 +433,7 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
+exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
@@ -523,7 +523,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
+exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
 <div
   class="ant-alert ant-alert-info ant-alert-no-icon"
   data-show="true"
@@ -552,7 +552,7 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
+exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -864,7 +864,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/description.md correctly 1`] = `
+exports[`renders ./components/alert/demo/description.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
@@ -949,7 +949,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
+exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
@@ -960,7 +960,7 @@ exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
+exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success"
@@ -1307,60 +1307,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
-<div
-  class="ant-alert ant-alert-warning ant-alert-banner"
-  data-show="true"
-  role="alert"
->
-  <span
-    aria-label="exclamation-circle"
-    class="anticon anticon-exclamation-circle ant-alert-icon"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="exclamation-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-      />
-    </svg>
-  </span>
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      <div
-        class=" marquee-container"
-        style="--pause-on-hover: paused; --pause-on-click: running;"
-      >
-        <div
-          class="marquee"
-          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
-        >
-          I can be a React component, multiple React components, or just some text.
-        </div>
-        <div
-          class="marquee"
-          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
-        >
-          I can be a React component, multiple React components, or just some text.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
+exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
 <div>
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -1408,7 +1355,7 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/style.md correctly 1`] = `
+exports[`renders ./components/alert/demo/style.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
diff --git a/components/alert/__tests__/demo-extend.test.ts b/components/alert/__tests__/demo-extend.test.ts
index f0592bac09..1bc1fb5869 100644
--- a/components/alert/__tests__/demo-extend.test.ts
+++ b/components/alert/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('alert', { skip: ['loop-banner.md'] });
+extendTest('alert', { skip: ['loop-banner.tsx'] });
diff --git a/components/alert/__tests__/demo.test.ts b/components/alert/__tests__/demo.test.ts
index 86318266b3..07b6d8ed6a 100644
--- a/components/alert/__tests__/demo.test.ts
+++ b/components/alert/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('alert', { skip: ['loop-banner.md'] });
+demoTest('alert', { skip: ['loop-banner.tsx'] });
diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2f4ff9307d..8ddca43f73 100644
--- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/anchor/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = `
 <div>
   <div
     class=""
@@ -80,7 +80,7 @@ exports[`renders ./components/anchor/demo/basic.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/customizeHighlight.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -155,7 +155,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onChange.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -229,7 +229,7 @@ exports[`renders ./components/anchor/demo/onChange.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onClick.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -303,7 +303,7 @@ exports[`renders ./components/anchor/demo/onClick.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/static.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -377,7 +377,7 @@ exports[`renders ./components/anchor/demo/static.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/targetOffset.md extend context correctly 1`] = `
+exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
 <div>
   <div
     class=""
diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
index da604377fe..06bc1dc69b 100644
--- a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
 <div>
   <div
     class=""
@@ -80,7 +80,7 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -155,7 +155,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -229,7 +229,7 @@ exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -303,7 +303,7 @@ exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height: 100vh;"
@@ -377,7 +377,7 @@ exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/targetOffset.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
 <div>
   <div
     class=""
diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4891f497a7..22199a9e73 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/auto-complete/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
@@ -97,7 +97,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/auto-complete/demo/certain-category.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/certain-category.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 250px;"
@@ -458,7 +458,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md extend cont
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/custom.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 200px;"
@@ -505,7 +505,7 @@ exports[`renders ./components/auto-complete/demo/custom.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/form-debug.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/form-debug.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   style="margin: 0px auto;"
@@ -1723,7 +1723,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
 </form>
 `;
 
-exports[`renders ./components/auto-complete/demo/non-case-sensitive.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/non-case-sensitive.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -1847,7 +1847,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md extend co
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/options.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/options.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -1895,7 +1895,7 @@ exports[`renders ./components/auto-complete/demo/options.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="display: flex;"
@@ -2074,7 +2074,7 @@ exports[`renders ./components/auto-complete/demo/render-panel.md extend context
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -2177,7 +2177,7 @@ exports[`renders ./components/auto-complete/demo/status.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/uncertain-category.md extend context correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/uncertain-category.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 300px;"
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap
index 4f88b99486..3c8b9ad874 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
@@ -69,7 +69,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/certain-category.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 250px;"
@@ -138,7 +138,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/custom.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 200px;"
@@ -171,7 +171,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   style="margin: 0px auto;"
@@ -1010,7 +1010,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/non-case-sensitive.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -1044,7 +1044,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/options.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -1078,7 +1078,7 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/render-panel.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="display: flex;"
@@ -1146,7 +1146,7 @@ exports[`renders ./components/auto-complete/demo/render-panel.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1221,7 +1221,7 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/uncertain-category.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 300px;"
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8072099407..3d177b6489 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/avatar/demo/badge.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/badge.tsx extend context correctly 1`] = `
 Array [
   <span
     class="avatar-item"
@@ -85,7 +85,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div>
     <span
@@ -280,7 +280,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/dynamic.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/dynamic.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-lg ant-avatar-circle"
@@ -314,7 +314,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/fallback.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/fallback.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -333,7 +333,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/group.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/group.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-avatar-group"
@@ -840,7 +840,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/responsive.tsx extend context correctly 1`] = `
 <span
   class="ant-avatar ant-avatar-circle ant-avatar-icon"
   style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
@@ -867,7 +867,7 @@ exports[`renders ./components/avatar/demo/responsive.md extend context correctly
 </span>
 `;
 
-exports[`renders ./components/avatar/demo/toggle-debug.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/toggle-debug.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -944,7 +944,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/type.md extend context correctly 1`] = `
+exports[`renders ./components/avatar/demo/type.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-icon"
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo.test.ts.snap
index c85f2906d6..67ec7fad19 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/badge.tsx correctly 1`] = `
 Array [
   <span
     class="avatar-item"
@@ -85,7 +85,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/basic.tsx correctly 1`] = `
 Array [
   <div>
     <span
@@ -280,7 +280,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/dynamic.tsx correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-lg ant-avatar-circle"
@@ -314,7 +314,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/fallback.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/fallback.tsx correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -333,7 +333,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/group.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/group.tsx correctly 1`] = `
 Array [
   <div
     class="ant-avatar-group"
@@ -519,7 +519,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/responsive.tsx correctly 1`] = `
 <span
   class="ant-avatar ant-avatar-circle ant-avatar-icon"
   style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
@@ -546,7 +546,7 @@ exports[`renders ./components/avatar/demo/responsive.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/toggle-debug.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -623,7 +623,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
+exports[`renders ./components/avatar/demo/type.tsx correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-icon"
diff --git a/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap
index d9c58f169e..fe6b57e61e 100644
--- a/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/back-top/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-back-top"
@@ -13,7 +13,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/back-top/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/back-top/demo/custom.tsx extend context correctly 1`] = `
 <div
   style="height: 600vh; padding: 8px;"
 >
diff --git a/components/back-top/__tests__/__snapshots__/demo.test.ts.snap b/components/back-top/__tests__/__snapshots__/demo.test.ts.snap
index 22fc99e534..a4fb25ee39 100644
--- a/components/back-top/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/back-top/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
+exports[`renders ./components/back-top/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-back-top"
@@ -13,7 +13,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/back-top/demo/custom.md correctly 1`] = `
+exports[`renders ./components/back-top/demo/custom.tsx correctly 1`] = `
 <div
   style="height: 600vh; padding: 8px;"
 >
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index fa7783fec6..b81dd161ac 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/badge/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -87,7 +87,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/change.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/change.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -242,7 +242,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/colorful.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/colorful.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -565,7 +565,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/dot.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -611,7 +611,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/link.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] = `
 <a
   href="#"
 >
@@ -646,7 +646,7 @@ exports[`renders ./components/badge/demo/link.md extend context correctly 1`] =
 </a>
 `;
 
-exports[`renders ./components/badge/demo/mix.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge ant-badge-status"
@@ -829,7 +829,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/no-wrapper.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -944,7 +944,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/badge/demo/offset.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`] = `
 <span
   class="ant-badge"
 >
@@ -976,7 +976,7 @@ exports[`renders ./components/badge/demo/offset.md extend context correctly 1`]
 </span>
 `;
 
-exports[`renders ./components/badge/demo/overflow.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -1076,7 +1076,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/ribbbon.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-ribbon-wrapper"
@@ -1385,7 +1385,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1548,7 +1548,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/badge/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/size.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -1609,7 +1609,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/status.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -1766,7 +1766,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/title.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/title.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
index 607c63843e..ceaf00a16e 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
+exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -87,7 +87,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/change.md correctly 1`] = `
+exports[`renders ./components/badge/demo/change.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -242,7 +242,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
+exports[`renders ./components/badge/demo/colorful.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -565,7 +565,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
+exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -611,7 +611,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/link.md correctly 1`] = `
+exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
 <a
   href="#"
 >
@@ -646,7 +646,7 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/badge/demo/mix.md correctly 1`] = `
+exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge ant-badge-status"
@@ -829,7 +829,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
+exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -944,7 +944,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
+exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = `
 <span
   class="ant-badge"
 >
@@ -976,7 +976,7 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
+exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -1076,7 +1076,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
+exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
 Array [
   <div
     class="ant-ribbon-wrapper"
@@ -1385,7 +1385,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
+exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1548,7 +1548,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/size.md correctly 1`] = `
+exports[`renders ./components/badge/demo/size.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
@@ -1609,7 +1609,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/status.md correctly 1`] = `
+exports[`renders ./components/badge/demo/status.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -1766,7 +1766,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/title.md correctly 1`] = `
+exports[`renders ./components/badge/demo/title.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
index a79d1eedc8..6d636b6b31 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/breadcrumb/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -65,7 +65,7 @@ exports[`renders ./components/breadcrumb/demo/basic.md extend context correctly
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -358,7 +358,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator.md extend context correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/separator.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -417,7 +417,7 @@ exports[`renders ./components/breadcrumb/demo/separator.md extend context correc
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator-component.md extend context correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/separator-component.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -471,7 +471,7 @@ exports[`renders ./components/breadcrumb/demo/separator-component.md extend cont
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/withIcon.md extend context correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
index fe8432dc01..325ffedf94 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -65,7 +65,7 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -153,7 +153,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -212,7 +212,7 @@ exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/separator-component.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -266,7 +266,7 @@ exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
diff --git a/components/breadcrumb/__tests__/demo-extend.test.ts b/components/breadcrumb/__tests__/demo-extend.test.ts
index 0566f7478a..38789e63ad 100644
--- a/components/breadcrumb/__tests__/demo-extend.test.ts
+++ b/components/breadcrumb/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('breadcrumb', { skip: ['react-router.md'] });
+extendTest('breadcrumb', { skip: ['react-router.tsx'] });
diff --git a/components/breadcrumb/__tests__/demo.test.ts b/components/breadcrumb/__tests__/demo.test.ts
index 66df1401a6..535d04a0f1 100644
--- a/components/breadcrumb/__tests__/demo.test.ts
+++ b/components/breadcrumb/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('breadcrumb', { skip: ['react-router.md'] });
+demoTest('breadcrumb', { skip: ['react-router.tsx'] });
diff --git a/components/breadcrumb/__tests__/image.test.ts b/components/breadcrumb/__tests__/image.test.ts
index 862844ec8e..1c86b595a0 100644
--- a/components/breadcrumb/__tests__/image.test.ts
+++ b/components/breadcrumb/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Breadcrumb image', () => {
-  imageDemoTest('breadcrumb', { skip: ['react-router.md'] });
+  imageDemoTest('breadcrumb', { skip: ['react-router.tsx'] });
 });
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 633e7af29f..fba43bb2bb 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/button/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -46,7 +46,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/block.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/block.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-block"
@@ -83,7 +83,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/chinese-chars-loading.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/chinese-chars-loading.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-btn-loading"
@@ -273,7 +273,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/danger.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/danger.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-dangerous"
@@ -318,7 +318,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -487,7 +487,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/ghost.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/ghost.tsx extend context correctly 1`] = `
 <div
   class="site-button-ghost-wrapper"
 >
@@ -526,7 +526,7 @@ exports[`renders ./components/button/demo/ghost.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/button/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
@@ -1199,7 +1199,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/legacy-group.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/legacy-group.tsx extend context correctly 1`] = `
 Array [
   <div>
     <div
@@ -1581,7 +1581,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/loading.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/loading.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -1775,7 +1775,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/multiple.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/multiple.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -2019,7 +2019,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/button/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 4840a09855..bd06a7262b 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/button/demo/basic.md correctly 1`] = `
+exports[`renders ./components/button/demo/basic.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -46,7 +46,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/block.md correctly 1`] = `
+exports[`renders ./components/button/demo/block.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-block"
@@ -83,7 +83,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/chinese-chars-loading.md correctly 1`] = `
+exports[`renders ./components/button/demo/chinese-chars-loading.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-btn-loading"
@@ -273,7 +273,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/danger.md correctly 1`] = `
+exports[`renders ./components/button/demo/danger.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-dangerous"
@@ -318,7 +318,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/button/demo/disabled.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -487,7 +487,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
+exports[`renders ./components/button/demo/ghost.tsx correctly 1`] = `
 <div
   class="site-button-ghost-wrapper"
 >
@@ -526,7 +526,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/button/demo/icon.md correctly 1`] = `
+exports[`renders ./components/button/demo/icon.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
@@ -1007,7 +1007,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
+exports[`renders ./components/button/demo/legacy-group.tsx correctly 1`] = `
 Array [
   <div>
     <div
@@ -1245,7 +1245,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/loading.md correctly 1`] = `
+exports[`renders ./components/button/demo/loading.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -1439,7 +1439,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
+exports[`renders ./components/button/demo/multiple.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -1496,7 +1496,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/button/demo/size.md correctly 1`] = `
+exports[`renders ./components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/button/__tests__/image.test.ts b/components/button/__tests__/image.test.ts
index 69d7f68c78..d2c1421bec 100644
--- a/components/button/__tests__/image.test.ts
+++ b/components/button/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Button image', () => {
-  imageDemoTest('button', { skip: ['loading.md'] });
+  imageDemoTest('button', { skip: ['loading.tsx'] });
 });
diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
index d91ffc15ad..d9f60498f8 100644
--- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/calendar/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/calendar/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-picker-calendar ant-picker-calendar-full"
 >
@@ -1590,7 +1590,7 @@ exports[`renders ./components/calendar/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/card.md extend context correctly 1`] = `
+exports[`renders ./components/calendar/demo/card.tsx extend context correctly 1`] = `
 <div
   class="site-calendar-demo-card"
 >
@@ -3184,7 +3184,7 @@ exports[`renders ./components/calendar/demo/card.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/customize-header.md extend context correctly 1`] = `
+exports[`renders ./components/calendar/demo/customize-header.tsx extend context correctly 1`] = `
 <div
   class="site-calendar-customize-header-wrapper"
 >
@@ -4795,7 +4795,7 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/notice-calendar.md extend context correctly 1`] = `
+exports[`renders ./components/calendar/demo/notice-calendar.tsx extend context correctly 1`] = `
 <div
   class="ant-picker-calendar ant-picker-calendar-full"
 >
@@ -6782,7 +6782,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md extend context co
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/select.md extend context correctly 1`] = `
+exports[`renders ./components/calendar/demo/select.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-info ant-alert-no-icon"
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
index 75603c7a59..7b2de72df8 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
+exports[`renders ./components/calendar/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-picker-calendar ant-picker-calendar-full"
 >
@@ -944,7 +944,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
+exports[`renders ./components/calendar/demo/card.tsx correctly 1`] = `
 <div
   class="site-calendar-demo-card"
 >
@@ -1892,7 +1892,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = `
+exports[`renders ./components/calendar/demo/customize-header.tsx correctly 1`] = `
 <div
   class="site-calendar-customize-header-wrapper"
 >
@@ -2865,7 +2865,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
+exports[`renders ./components/calendar/demo/notice-calendar.tsx correctly 1`] = `
 <div
   class="ant-picker-calendar ant-picker-calendar-full"
 >
@@ -4206,7 +4206,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
+exports[`renders ./components/calendar/demo/select.tsx correctly 1`] = `
 Array [
   <div
     class="ant-alert ant-alert-info ant-alert-no-icon"
diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index 40947f48c5..32296e0de1 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/card/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-card ant-card-bordered"
@@ -85,7 +85,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/card/demo/border-less.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/border-less.tsx extend context correctly 1`] = `
 <div
   class="site-card-border-less-wrapper"
 >
@@ -123,7 +123,7 @@ exports[`renders ./components/card/demo/border-less.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/card/demo/flexible-content.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/flexible-content.tsx extend context correctly 1`] = `
 <div
   class="ant-card ant-card-bordered ant-card-hoverable"
   style="width: 240px;"
@@ -161,7 +161,7 @@ exports[`renders ./components/card/demo/flexible-content.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/card/demo/grid-card.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/grid-card.tsx extend context correctly 1`] = `
 <div
   class="ant-card ant-card-bordered ant-card-contain-grid"
 >
@@ -227,7 +227,7 @@ exports[`renders ./components/card/demo/grid-card.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/card/demo/in-column.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/in-column.tsx extend context correctly 1`] = `
 <div
   class="site-card-wrapper"
 >
@@ -320,7 +320,7 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/card/demo/inner.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/inner.tsx extend context correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
 >
@@ -407,7 +407,7 @@ exports[`renders ./components/card/demo/inner.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/card/demo/loading.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/loading.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -572,7 +572,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/meta.tsx extend context correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
   style="width: 300px;"
@@ -700,7 +700,7 @@ exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/simple.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/simple.tsx extend context correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
   style="width: 300px;"
@@ -721,7 +721,7 @@ exports[`renders ./components/card/demo/simple.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/card/demo/tabs.md extend context correctly 1`] = `
+exports[`renders ./components/card/demo/tabs.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-card ant-card-bordered ant-card-contain-tabs"
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap
index a12f68e960..72407fe6e5 100644
--- a/components/card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/card/demo/basic.md correctly 1`] = `
+exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-card ant-card-bordered"
@@ -85,7 +85,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
+exports[`renders ./components/card/demo/border-less.tsx correctly 1`] = `
 <div
   class="site-card-border-less-wrapper"
 >
@@ -123,7 +123,7 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
+exports[`renders ./components/card/demo/flexible-content.tsx correctly 1`] = `
 <div
   class="ant-card ant-card-bordered ant-card-hoverable"
   style="width: 240px;"
@@ -161,7 +161,7 @@ exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
+exports[`renders ./components/card/demo/grid-card.tsx correctly 1`] = `
 <div
   class="ant-card ant-card-bordered ant-card-contain-grid"
 >
@@ -227,7 +227,7 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
+exports[`renders ./components/card/demo/in-column.tsx correctly 1`] = `
 <div
   class="site-card-wrapper"
 >
@@ -320,7 +320,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/inner.md correctly 1`] = `
+exports[`renders ./components/card/demo/inner.tsx correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
 >
@@ -407,7 +407,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/loading.md correctly 1`] = `
+exports[`renders ./components/card/demo/loading.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -572,7 +572,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/card/demo/meta.md correctly 1`] = `
+exports[`renders ./components/card/demo/meta.tsx correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
   style="width: 300px;"
@@ -700,7 +700,7 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/simple.md correctly 1`] = `
+exports[`renders ./components/card/demo/simple.tsx correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
   style="width: 300px;"
@@ -721,7 +721,7 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
+exports[`renders ./components/card/demo/tabs.tsx correctly 1`] = `
 Array [
   <div
     class="ant-card ant-card-bordered ant-card-contain-tabs"
diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2a4345da77..3248f2743d 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/carousel/demo/autoplay.md extend context correctly 1`] = `
+exports[`renders ./components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -234,7 +234,7 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/carousel/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -468,7 +468,7 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`] = `
+exports[`renders ./components/carousel/demo/fade.tsx extend context correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -602,7 +602,7 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/position.md extend context correctly 1`] = `
+exports[`renders ./components/carousel/demo/position.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index b909c43bec..1809003c4f 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/autoplay.tsx correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -234,7 +234,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -468,7 +468,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/fade.tsx correctly 1`] = `
 <div
   class="ant-carousel"
 >
@@ -602,7 +602,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/position.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index acad022041..5c987ce19a 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/cascader/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -151,7 +151,7 @@ exports[`renders ./components/cascader/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/change-on-select.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/change-on-select.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -300,7 +300,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md extend context c
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-dropdown.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -463,7 +463,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-render.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-render.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
   style="width: 100%;"
@@ -656,7 +656,7 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-trigger.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-trigger.tsx extend context correctly 1`] = `
 <span>
   Unselect
   <a
@@ -757,7 +757,7 @@ exports[`renders ./components/cascader/demo/custom-trigger.md extend context cor
 </span>
 `;
 
-exports[`renders ./components/cascader/demo/default-value.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/default-value.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -935,7 +935,7 @@ exports[`renders ./components/cascader/demo/default-value.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/disabled-option.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/disabled-option.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -1084,7 +1084,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md extend context co
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/fields-name.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/fields-name.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -1235,7 +1235,7 @@ exports[`renders ./components/cascader/demo/fields-name.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/hover.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/hover.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -1384,7 +1384,7 @@ exports[`renders ./components/cascader/demo/hover.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/lazy.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -1533,7 +1533,7 @@ exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/multiple.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/multiple.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
   style="width: 100%;"
@@ -1686,7 +1686,7 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -1922,7 +1922,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -2082,7 +2082,7 @@ exports[`renders ./components/cascader/demo/render-panel.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/search.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/search.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
 >
@@ -2230,7 +2230,7 @@ exports[`renders ./components/cascader/demo/search.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/showCheckedStrategy.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
@@ -2615,7 +2615,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-lg ant-select-single ant-select-allow-clear ant-select-show-arrow"
@@ -3064,7 +3064,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -3333,7 +3333,7 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/cascader/demo/suffix.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo.test.ts.snap
index e579863acf..b14a879bd3 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -61,7 +61,7 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/change-on-select.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -120,7 +120,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -181,7 +181,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-render.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
   style="width: 100%;"
@@ -284,7 +284,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-trigger.tsx correctly 1`] = `
 <span>
   Unselect
   <a
@@ -295,7 +295,7 @@ exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/default-value.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -383,7 +383,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/disabled-option.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -442,7 +442,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/fields-name.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -503,7 +503,7 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/hover.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -562,7 +562,7 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/lazy.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
@@ -621,7 +621,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/multiple.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
   style="width: 100%;"
@@ -670,7 +670,7 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/placement.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -816,7 +816,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -976,7 +976,7 @@ exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/search.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
 >
@@ -1034,7 +1034,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/showCheckedStrategy.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
@@ -1211,7 +1211,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-lg ant-select-single ant-select-allow-clear ant-select-show-arrow"
@@ -1390,7 +1390,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1511,7 +1511,7 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/suffix.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
diff --git a/components/cascader/demo/showCheckedStrategy.tsx b/components/cascader/demo/showCheckedStrategy.tsx
index 3f8d60e760..1e0e6218cd 100644
--- a/components/cascader/demo/showCheckedStrategy.tsx
+++ b/components/cascader/demo/showCheckedStrategy.tsx
@@ -1,5 +1,7 @@
 /*
- * version: 4.20.0 */import { Cascader } from 'antd';
+ * version: 4.20.0 */
+import React from 'react';
+import { Cascader } from 'antd';
 
 const { SHOW_CHILD } = Cascader;
 
diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index a35a6273c3..1d4a8ad64f 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/checkbox/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/basic.tsx extend context correctly 1`] = `
 <label
   class="ant-checkbox-wrapper"
 >
@@ -22,7 +22,7 @@ exports[`renders ./components/checkbox/demo/basic.md extend context correctly 1`
 </label>
 `;
 
-exports[`renders ./components/checkbox/demo/check-all.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/check-all.tsx extend context correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper"
@@ -114,7 +114,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/controller.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/controller.tsx extend context correctly 1`] = `
 Array [
   <p
     style="margin-bottom: 20px;"
@@ -162,7 +162,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/debug-line.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/debug-line.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -365,7 +365,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/checkbox/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
@@ -406,7 +406,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/group.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/group.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-checkbox-group"
@@ -604,7 +604,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1`] = `
+exports[`renders ./components/checkbox/demo/layout.tsx extend context correctly 1`] = `
 <div
   class="ant-checkbox-group"
   style="width: 100%;"
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
index e5722805d1..828fa4142e 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
 <label
   class="ant-checkbox-wrapper"
 >
@@ -22,7 +22,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
 </label>
 `;
 
-exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/check-all.tsx correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper"
@@ -114,7 +114,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/controller.tsx correctly 1`] = `
 Array [
   <p
     style="margin-bottom: 20px;"
@@ -162,7 +162,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/debug-line.tsx correctly 1`] = `
 <div>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -365,7 +365,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/disabled.tsx correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
@@ -406,7 +406,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/group.tsx correctly 1`] = `
 Array [
   <div
     class="ant-checkbox-group"
@@ -604,7 +604,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
+exports[`renders ./components/checkbox/demo/layout.tsx correctly 1`] = `
 <div
   class="ant-checkbox-group"
   style="width: 100%;"
diff --git a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
index 955a9afd70..aeba92634c 100644
--- a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/collapse/demo/accordion.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/accordion.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
   role="tablist"
@@ -128,7 +128,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
@@ -269,7 +269,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/borderless.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/borderless.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
 >
@@ -410,7 +410,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/collapsible.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/collapsible.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -526,7 +526,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/custom.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
 >
@@ -667,7 +667,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/extra.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/extra.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-collapse ant-collapse-icon-position-start"
@@ -1029,7 +1029,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/ghost.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-ghost"
 >
@@ -1170,7 +1170,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/mix.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
@@ -1297,7 +1297,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/noarrow.md extend context correctly 1`] = `
+exports[`renders ./components/collapse/demo/noarrow.tsx extend context correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
index 469cf742d4..da69b37d9d 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/accordion.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
   role="tablist"
@@ -128,7 +128,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
@@ -269,7 +269,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/borderless.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
 >
@@ -410,7 +410,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/collapsible.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -526,7 +526,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/custom.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
 >
@@ -667,7 +667,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/extra.tsx correctly 1`] = `
 Array [
   <div
     class="ant-collapse ant-collapse-icon-position-start"
@@ -947,7 +947,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/ghost.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start ant-collapse-ghost"
 >
@@ -1088,7 +1088,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/mix.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
@@ -1215,7 +1215,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
+exports[`renders ./components/collapse/demo/noarrow.tsx correctly 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-start"
 >
diff --git a/components/config-provider/__tests__/image.test.ts b/components/config-provider/__tests__/image.test.ts
index 4983a43970..fe31a4e9dc 100644
--- a/components/config-provider/__tests__/image.test.ts
+++ b/components/config-provider/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('ConfigProvider image', () => {
-  imageDemoTest('config-provider', { skip: ['direction.md'] });
+  imageDemoTest('config-provider', { skip: ['direction.tsx'] });
 });
diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index bfa7780547..5df6aba382 100644
--- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/date-picker/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1856,7 +1856,7 @@ exports[`renders ./components/date-picker/demo/basic.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/bordered.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/bordered.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -6966,7 +6966,7 @@ exports[`renders ./components/date-picker/demo/bordered.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/date-render.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/date-render.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -8759,7 +8759,7 @@ exports[`renders ./components/date-picker/demo/date-render.md extend context cor
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/disabled.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -11991,7 +11991,7 @@ exports[`renders ./components/date-picker/demo/disabled.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/disabled-date.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/disabled-date.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -16893,7 +16893,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md extend context c
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/extra-footer.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/extra-footer.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -22894,7 +22894,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md extend context co
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/format.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/format.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -26888,7 +26888,7 @@ exports[`renders ./components/date-picker/demo/format.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/mode.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/mode.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -28601,7 +28601,7 @@ exports[`renders ./components/date-picker/demo/mode.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -30462,7 +30462,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/date-picker/demo/presetted-ranges.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/presetted-ranges.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -33692,7 +33692,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md extend contex
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/range-picker.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/range-picker.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -39396,7 +39396,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -40000,7 +40000,7 @@ exports[`renders ./components/date-picker/demo/render-panel.md extend context co
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/select-in-range.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/select-in-range.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-range"
@@ -41183,7 +41183,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/date-picker/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/size.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -43905,7 +43905,7 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/start-end.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/start-end.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -47811,7 +47811,7 @@ exports[`renders ./components/date-picker/demo/start-end.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -51384,7 +51384,7 @@ exports[`renders ./components/date-picker/demo/status.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/suffix.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -56616,7 +56616,7 @@ exports[`renders ./components/date-picker/demo/suffix.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/switchable.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/switchable.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -58249,7 +58249,7 @@ exports[`renders ./components/date-picker/demo/switchable.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/time.md extend context correctly 1`] = `
+exports[`renders ./components/date-picker/demo/time.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo.test.ts.snap
index 5d0c73ae45..d643033d77 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -226,7 +226,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/bordered.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -752,7 +752,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/date-render.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -888,7 +888,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/disabled.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1182,7 +1182,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/disabled-date.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1448,7 +1448,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/extra-footer.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1758,7 +1758,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/format.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2213,7 +2213,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/mode.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2349,7 +2349,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/placement.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -2559,7 +2559,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/presetted-ranges.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2737,7 +2737,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/range-picker.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -3259,7 +3259,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -3863,7 +3863,7 @@ exports[`renders ./components/date-picker/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/select-in-range.tsx correctly 1`] = `
 <div
   class="ant-picker ant-picker-range"
 >
@@ -3947,7 +3947,7 @@ exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/size.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -4238,7 +4238,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/start-end.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -4332,7 +4332,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -4603,7 +4603,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/suffix.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -4973,7 +4973,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/switchable.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -5091,7 +5091,7 @@ exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
+exports[`renders ./components/date-picker/demo/time.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/date-picker/__tests__/demo-extend.test.ts b/components/date-picker/__tests__/demo-extend.test.ts
index e7795ca02c..b0867412e2 100644
--- a/components/date-picker/__tests__/demo-extend.test.ts
+++ b/components/date-picker/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('date-picker', { skip: ['locale.md'] });
+extendTest('date-picker', { skip: ['locale.tsx'] });
diff --git a/components/date-picker/__tests__/demo.test.ts b/components/date-picker/__tests__/demo.test.ts
index b9ed2bdfa2..1a08d86c76 100644
--- a/components/date-picker/__tests__/demo.test.ts
+++ b/components/date-picker/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('date-picker', { skip: ['locale.md'] });
+demoTest('date-picker', { skip: ['locale.tsx'] });
diff --git a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8dd5e56243..cd61120089 100644
--- a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/descriptions/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -139,7 +139,7 @@ exports[`renders ./components/descriptions/demo/basic.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/border.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/border.tsx extend context correctly 1`] = `
 <div
   class="ant-descriptions ant-descriptions-bordered"
 >
@@ -385,7 +385,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/responsive.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-descriptions ant-descriptions-bordered"
@@ -561,7 +561,7 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/size.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -987,7 +987,7 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/style.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/style.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -1241,7 +1241,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/descriptions/demo/text.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/text.tsx extend context correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -1640,7 +1640,7 @@ exports[`renders ./components/descriptions/demo/text.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/vertical.tsx extend context correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -1844,7 +1844,7 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/vertical-border.md extend context correctly 1`] = `
+exports[`renders ./components/descriptions/demo/vertical-border.tsx extend context correctly 1`] = `
 <div
   class="ant-descriptions ant-descriptions-bordered"
 >
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
index 784c8039ca..14efb9972e 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -139,7 +139,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/border.tsx correctly 1`] = `
 <div
   class="ant-descriptions ant-descriptions-bordered"
 >
@@ -385,7 +385,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/responsive.tsx correctly 1`] = `
 <div>
   <div
     class="ant-descriptions ant-descriptions-bordered"
@@ -561,7 +561,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/size.tsx correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -987,7 +987,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/style.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -1241,7 +1241,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/text.tsx correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -1640,7 +1640,7 @@ exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/vertical.tsx correctly 1`] = `
 <div
   class="ant-descriptions"
 >
@@ -1844,7 +1844,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] = `
+exports[`renders ./components/descriptions/demo/vertical-border.tsx correctly 1`] = `
 <div
   class="ant-descriptions ant-descriptions-bordered"
 >
diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
index b7f5a3fa31..8cb3943799 100644
--- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/divider/demo/customize-style.md extend context correctly 1`] = `
+exports[`renders ./components/divider/demo/customize-style.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal"
@@ -36,7 +36,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/horizontal.md extend context correctly 1`] = `
+exports[`renders ./components/divider/demo/horizontal.tsx extend context correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -58,7 +58,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/plain.md extend context correctly 1`] = `
+exports[`renders ./components/divider/demo/plain.tsx extend context correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -105,7 +105,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/divider/demo/vertical.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-vertical"
@@ -128,7 +128,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/with-text.md extend context correctly 1`] = `
+exports[`renders ./components/divider/demo/with-text.tsx extend context correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
index f3eacfe40b..b894d0fa2d 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
+exports[`renders ./components/divider/demo/customize-style.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal"
@@ -36,7 +36,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
+exports[`renders ./components/divider/demo/horizontal.tsx correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -58,7 +58,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/plain.md correctly 1`] = `
+exports[`renders ./components/divider/demo/plain.tsx correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -105,7 +105,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/divider/demo/vertical.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-vertical"
@@ -128,7 +128,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
+exports[`renders ./components/divider/demo/with-text.tsx correctly 1`] = `
 Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 492e5f65c8..34f1de497c 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/drawer/demo/basic-right.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -99,7 +99,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/config-provider.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/config-provider.tsx extend context correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
 >
@@ -201,7 +201,7 @@ exports[`renders ./components/drawer/demo/config-provider.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/extra.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/extra.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -427,7 +427,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/form-in-drawer.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/form-in-drawer.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -2507,7 +2507,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/multi-level-drawer.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/multi-level-drawer.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -2633,7 +2633,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/no-mask.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/no-mask.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -2729,7 +2729,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -2897,7 +2897,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/render-in-current.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/render-in-current.tsx extend context correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
 >
@@ -2972,7 +2972,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   class="ant-drawer ant-drawer-pure"
   style="height: 300px; box-shadow: 0 0 5px red;"
@@ -3032,7 +3032,7 @@ exports[`renders ./components/drawer/demo/render-panel.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -3185,7 +3185,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/drawer/demo/user-profile.md extend context correctly 1`] = `
+exports[`renders ./components/drawer/demo/user-profile.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-list ant-list-split ant-list-bordered"
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index af8095d08c..90d2b5abd6 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/basic-right.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/drawer/demo/config-provider.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/config-provider.tsx correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
 >
@@ -26,7 +26,7 @@ exports[`renders ./components/drawer/demo/config-provider.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/extra.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/extra.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -131,7 +131,7 @@ exports[`renders ./components/drawer/demo/extra.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -167,7 +167,7 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -178,7 +178,7 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
 </button>
 `;
 
-exports[`renders ./components/drawer/demo/no-mask.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/no-mask.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -189,7 +189,7 @@ exports[`renders ./components/drawer/demo/no-mask.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/placement.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -294,7 +294,7 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/render-in-current.tsx correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
 >
@@ -331,7 +331,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/render-panel.tsx correctly 1`] = `
 <div
   class="ant-drawer ant-drawer-pure"
   style="height: 300px; box-shadow: 0 0 5px red;"
@@ -391,7 +391,7 @@ exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/size.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/size.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -423,7 +423,7 @@ exports[`renders ./components/drawer/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
+exports[`renders ./components/drawer/demo/user-profile.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-bordered"
 >
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index bde123b8a8..15d6ac54e4 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/dropdown/demo/arrow.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/arrow.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -1302,7 +1302,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/arrow-center.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/arrow-center.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -2604,7 +2604,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -2926,7 +2926,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/context-menu.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/context-menu.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-dropdown-trigger site-dropdown-context-menu"
@@ -3124,7 +3124,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/dropdown-button.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/dropdown-button.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -4874,7 +4874,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/event.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/event.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -5103,7 +5103,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/item.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/item.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -5347,7 +5347,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/loading.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/loading.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -5865,7 +5865,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/menu-full.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/menu-full.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -7033,7 +7033,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/overlay-open.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -7262,7 +7262,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/placement.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -8596,7 +8596,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -8889,7 +8889,7 @@ exports[`renders ./components/dropdown/demo/render-panel.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/selectable.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/selectable.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-typography ant-dropdown-trigger"
@@ -9118,7 +9118,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/sub-menu.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/sub-menu.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
@@ -9641,7 +9641,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/trigger.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/trigger.tsx extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
index cac6ccf0c6..3019917f74 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/dropdown/demo/arrow.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/arrow.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -54,7 +54,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/arrow-center.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/arrow-center.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -108,7 +108,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/basic.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -148,7 +148,7 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/context-menu.tsx correctly 1`] = `
 <div
   class="ant-dropdown-trigger site-dropdown-context-menu"
   style="text-align: center; height: 200px; line-height: 200px;"
@@ -157,7 +157,7 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -419,7 +419,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/event.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -459,7 +459,7 @@ exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/item.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -499,7 +499,7 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/loading.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -717,7 +717,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/menu-full.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -757,7 +757,7 @@ exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/overlay-open.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -797,7 +797,7 @@ exports[`renders ./components/dropdown/demo/overlay-open.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/placement.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -901,7 +901,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -1017,7 +1017,7 @@ exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/selectable.tsx correctly 1`] = `
 <a
   class="ant-typography ant-dropdown-trigger"
 >
@@ -1057,7 +1057,7 @@ exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/sub-menu.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
@@ -1097,7 +1097,7 @@ exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/trigger.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/trigger.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
diff --git a/components/dropdown/__tests__/image.test.ts b/components/dropdown/__tests__/image.test.ts
index ca5dea8239..ad2c9d50c0 100644
--- a/components/dropdown/__tests__/image.test.ts
+++ b/components/dropdown/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Dropdown image', () => {
-  imageDemoTest('dropdown', { skip: ['dropdown-button.md'] });
+  imageDemoTest('dropdown', { skip: ['dropdown-button.tsx'] });
 });
diff --git a/components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4bc49dd84c..c320b35b46 100644
--- a/components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/empty/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/empty/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -75,7 +75,7 @@ exports[`renders ./components/empty/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/empty/demo/config-provider.md extend context correctly 1`] = `
+exports[`renders ./components/empty/demo/config-provider.tsx extend context correctly 1`] = `
 <div>
   <button
     aria-checked="false"
@@ -1187,7 +1187,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/empty/demo/customize.md extend context correctly 1`] = `
+exports[`renders ./components/empty/demo/customize.tsx extend context correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -1227,7 +1227,7 @@ exports[`renders ./components/empty/demo/customize.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/empty/demo/description.md extend context correctly 1`] = `
+exports[`renders ./components/empty/demo/description.tsx extend context correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -1297,7 +1297,7 @@ exports[`renders ./components/empty/demo/description.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/empty/demo/simple.md extend context correctly 1`] = `
+exports[`renders ./components/empty/demo/simple.tsx extend context correctly 1`] = `
 <div
   class="ant-empty ant-empty-normal"
 >
diff --git a/components/empty/__tests__/__snapshots__/demo.test.ts.snap b/components/empty/__tests__/__snapshots__/demo.test.ts.snap
index 4c3e6d9872..ed520379d8 100644
--- a/components/empty/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/empty/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/empty/demo/basic.md correctly 1`] = `
+exports[`renders ./components/empty/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -75,7 +75,7 @@ exports[`renders ./components/empty/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
+exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
 <div>
   <button
     aria-checked="false"
@@ -732,7 +732,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
+exports[`renders ./components/empty/demo/customize.tsx correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -772,7 +772,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/empty/demo/description.md correctly 1`] = `
+exports[`renders ./components/empty/demo/description.tsx correctly 1`] = `
 <div
   class="ant-empty"
 >
@@ -842,7 +842,7 @@ exports[`renders ./components/empty/demo/description.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/empty/demo/simple.md correctly 1`] = `
+exports[`renders ./components/empty/demo/simple.tsx correctly 1`] = `
 <div
   class="ant-empty ant-empty-normal"
 >
diff --git a/components/empty/demo/basic.tsx b/components/empty/demo/basic.tsx
index d7f8315b02..6069191ab3 100644
--- a/components/empty/demo/basic.tsx
+++ b/components/empty/demo/basic.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Empty } from 'antd';
 
 const App: React.FC = () => <Empty />;
diff --git a/components/empty/demo/description.tsx b/components/empty/demo/description.tsx
index 71febd2140..416c677f2c 100644
--- a/components/empty/demo/description.tsx
+++ b/components/empty/demo/description.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Empty } from 'antd';
 
 const App: React.FC = () => <Empty description={false} />;
diff --git a/components/empty/demo/simple.tsx b/components/empty/demo/simple.tsx
index 4b29622c46..4bfe60ea9b 100644
--- a/components/empty/demo/simple.tsx
+++ b/components/empty/demo/simple.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Empty } from 'antd';
 
 const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 146bd9eb63..e56be9b2c4 100644
--- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/float-button/demo/back-top.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/back-top.tsx extend context correctly 1`] = `
 <div
   style="height: 500vh; padding: 10px;"
 >
@@ -28,7 +28,7 @@ exports[`renders ./components/float-button/demo/back-top.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/basic.tsx extend context correctly 1`] = `
 <button
   class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
   type="button"
@@ -67,7 +67,7 @@ exports[`renders ./components/float-button/demo/basic.md extend context correctl
 </button>
 `;
 
-exports[`renders ./components/float-button/demo/description.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/description.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@@ -175,7 +175,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/group.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/group.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
@@ -376,7 +376,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/group-menu.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
 <div
   class="ant-float-btn-group ant-float-btn-group-circle"
 >
@@ -419,7 +419,7 @@ exports[`renders ./components/float-button/demo/group-menu.md extend context cor
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/shape.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/shape.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -504,7 +504,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/tooltip.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/tooltip.tsx extend context correctly 1`] = `
 <div>
   <span>
     查看右下角的 FloatButton
@@ -574,7 +574,7 @@ exports[`renders ./components/float-button/demo/tooltip.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/type.md extend context correctly 1`] = `
+exports[`renders ./components/float-button/demo/type.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
index 0cb03bb4cb..f8a5fa4802 100644
--- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/float-button/demo/back-top.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/back-top.tsx correctly 1`] = `
 <div
   style="height: 500vh; padding: 10px;"
 >
@@ -28,7 +28,7 @@ exports[`renders ./components/float-button/demo/back-top.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/basic.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/basic.tsx correctly 1`] = `
 <button
   class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
   type="button"
@@ -67,7 +67,7 @@ exports[`renders ./components/float-button/demo/basic.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/float-button/demo/description.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/description.tsx correctly 1`] = `
 Array [
   <button
     class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@@ -175,7 +175,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/group.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/group.tsx correctly 1`] = `
 Array [
   <div
     class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
@@ -376,7 +376,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/group-menu.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
 <div
   class="ant-float-btn-group ant-float-btn-group-circle"
 >
@@ -419,7 +419,7 @@ exports[`renders ./components/float-button/demo/group-menu.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/shape.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/shape.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -504,7 +504,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/float-button/demo/tooltip.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/tooltip.tsx correctly 1`] = `
 <div>
   <span>
     查看右下角的 FloatButton
@@ -548,7 +548,7 @@ exports[`renders ./components/float-button/demo/tooltip.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/float-button/demo/type.md correctly 1`] = `
+exports[`renders ./components/float-button/demo/type.tsx correctly 1`] = `
 Array [
   <button
     class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index bfc74a8d7c..b7dcebf039 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/form/demo/advanced-search.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/advanced-search.tsx extend context correctly 1`] = `
 <div>
   <form
     class="ant-form ant-form-horizontal ant-advanced-search-form"
@@ -606,7 +606,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/form/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/basic.tsx extend context correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -792,7 +792,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
 </form>
 `;
 
-exports[`renders ./components/form/demo/col-24-debug.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/col-24-debug.tsx extend context correctly 1`] = `
 Array [
   <form
     autocomplete="off"
@@ -1582,7 +1582,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/control-hooks.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/control-hooks.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="control-hooks"
@@ -1863,7 +1863,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
 </form>
 `;
 
-exports[`renders ./components/form/demo/control-ref.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/control-ref.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="control-ref"
@@ -2144,7 +2144,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/customized-form-controls.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/customized-form-controls.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-inline"
   id="customized_form_controls"
@@ -2362,7 +2362,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
 </form>
 `;
 
-exports[`renders ./components/form/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
@@ -5173,7 +5173,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/disabled-input-debug.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/disabled-input-debug.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -5866,7 +5866,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md extend context c
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-item.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-item.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="dynamic_form_item"
@@ -5990,7 +5990,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md extend context corr
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items.tsx extend context correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -6080,7 +6080,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.md extend context cor
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx extend context correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -6342,7 +6342,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items-no-style.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx extend context correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -6462,7 +6462,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.md extend co
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-rule.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="dynamic_rule"
@@ -6614,7 +6614,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/form-context.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/form-context.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="basicForm"
@@ -6752,7 +6752,7 @@ exports[`renders ./components/form/demo/form-context.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/form-in-modal.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-primary"
@@ -6765,7 +6765,7 @@ exports[`renders ./components/form/demo/form-in-modal.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/form/demo/global-state.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/global-state.tsx extend context correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline"
@@ -6825,7 +6825,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/inline-login.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/inline-login.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-inline"
   id="horizontal_login"
@@ -6972,7 +6972,7 @@ exports[`renders ./components/form/demo/inline-login.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/label-debug.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/label-debug.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="label-ellipsis"
@@ -7094,7 +7094,7 @@ exports[`renders ./components/form/demo/label-debug.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/layout.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/layout.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -7295,7 +7295,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
 </form>
 `;
 
-exports[`renders ./components/form/demo/layout-can-wrap.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/layout-can-wrap.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="wrap"
@@ -7422,7 +7422,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md extend context correc
 </form>
 `;
 
-exports[`renders ./components/form/demo/nest-messages.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/nest-messages.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="nest-messages"
@@ -7710,7 +7710,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
 </form>
 `;
 
-exports[`renders ./components/form/demo/normal-login.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/normal-login.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal login-form"
   id="normal_login"
@@ -7909,7 +7909,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/ref-item.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -7995,7 +7995,7 @@ exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`]
 </form>
 `;
 
-exports[`renders ./components/form/demo/register.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/register.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="register"
@@ -9374,7 +9374,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
 </form>
 `;
 
-exports[`renders ./components/form/demo/required-mark.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/required-mark.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-vertical"
 >
@@ -9681,7 +9681,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
 </form>
 `;
 
-exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal ant-form-default"
 >
@@ -11098,7 +11098,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/time-related-controls.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/time-related-controls.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="time_related_controls"
@@ -18676,7 +18676,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
 </form>
 `;
 
-exports[`renders ./components/form/demo/useWatch.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/useWatch.tsx extend context correctly 1`] = `
 Array [
   <form
     autocomplete="off"
@@ -18835,7 +18835,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/validate-other.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/validate-other.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="validate_other"
@@ -20430,7 +20430,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
 </form>
 `;
 
-exports[`renders ./components/form/demo/validate-static.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/validate-static.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -26708,7 +26708,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
 </form>
 `;
 
-exports[`renders ./components/form/demo/warning-only.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/warning-only.tsx extend context correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-vertical"
@@ -26804,7 +26804,7 @@ exports[`renders ./components/form/demo/warning-only.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/without-form-create.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/without-form-create.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
diff --git a/components/form/__tests__/__snapshots__/demo.test.ts.snap b/components/form/__tests__/__snapshots__/demo.test.ts.snap
index a8773100ef..c7c6565d44 100644
--- a/components/form/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
+exports[`renders ./components/form/demo/advanced-search.tsx correctly 1`] = `
 <div>
   <form
     class="ant-form ant-form-horizontal ant-advanced-search-form"
@@ -442,7 +442,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/form/demo/basic.md correctly 1`] = `
+exports[`renders ./components/form/demo/basic.tsx correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -628,7 +628,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/col-24-debug.md correctly 1`] = `
+exports[`renders ./components/form/demo/col-24-debug.tsx correctly 1`] = `
 Array [
   <form
     autocomplete="off"
@@ -1204,7 +1204,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
+exports[`renders ./components/form/demo/control-hooks.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="control-hooks"
@@ -1386,7 +1386,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
+exports[`renders ./components/form/demo/control-ref.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="control-ref"
@@ -1568,7 +1568,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`] = `
+exports[`renders ./components/form/demo/customized-form-controls.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-inline"
   id="customized_form_controls"
@@ -1704,90 +1704,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
 </form>
 `;
 
-exports[`renders ./components/form/demo/dep-debug.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="debug"
->
-  1
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          for="debug_debug1"
-          title="debug1"
-        >
-          debug1
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <input
-              class="ant-input"
-              id="debug_debug1"
-              type="text"
-              value="debug1"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          for="debug_debug2"
-          title="debug2"
-        >
-          debug2
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <input
-              class="ant-input"
-              id="debug_debug2"
-              type="text"
-              value="debug2"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/form/demo/disabled.tsx correctly 1`] = `
 Array [
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
@@ -2739,7 +2656,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] = `
+exports[`renders ./components/form/demo/disabled-input-debug.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -3432,7 +3349,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-item.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="dynamic_form_item"
@@ -3556,7 +3473,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items.tsx correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -3646,7 +3563,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -3826,7 +3743,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-form-items-no-style.md correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-horizontal"
@@ -3946,7 +3863,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.md correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
+exports[`renders ./components/form/demo/dynamic-rule.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="dynamic_rule"
@@ -4098,7 +4015,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
+exports[`renders ./components/form/demo/form-context.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="basicForm"
@@ -4236,7 +4153,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
+exports[`renders ./components/form/demo/form-in-modal.tsx correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-primary"
@@ -4249,7 +4166,7 @@ exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
+exports[`renders ./components/form/demo/global-state.tsx correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline"
@@ -4309,7 +4226,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
+exports[`renders ./components/form/demo/inline-login.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-inline"
   id="horizontal_login"
@@ -4456,7 +4373,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
+exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="label-ellipsis"
@@ -4578,7 +4495,7 @@ exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/layout.md correctly 1`] = `
+exports[`renders ./components/form/demo/layout.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -4779,7 +4696,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
+exports[`renders ./components/form/demo/layout-can-wrap.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="wrap"
@@ -4906,7 +4823,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
+exports[`renders ./components/form/demo/nest-messages.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="nest-messages"
@@ -5194,7 +5111,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
+exports[`renders ./components/form/demo/normal-login.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal login-form"
   id="normal_login"
@@ -5393,7 +5310,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
+exports[`renders ./components/form/demo/ref-item.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -5479,7 +5396,7 @@ exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/register.md correctly 1`] = `
+exports[`renders ./components/form/demo/register.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="register"
@@ -6467,7 +6384,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
+exports[`renders ./components/form/demo/required-mark.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-vertical"
 >
@@ -6726,7 +6643,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/size.md correctly 1`] = `
+exports[`renders ./components/form/demo/size.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal ant-form-default"
 >
@@ -7381,7 +7298,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] = `
+exports[`renders ./components/form/demo/time-related-controls.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="time_related_controls"
@@ -7936,7 +7853,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
 </form>
 `;
 
-exports[`renders ./components/form/demo/useWatch.md correctly 1`] = `
+exports[`renders ./components/form/demo/useWatch.tsx correctly 1`] = `
 Array [
   <form
     autocomplete="off"
@@ -8095,7 +8012,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
+exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   id="validate_other"
@@ -9503,7 +9420,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
+exports[`renders ./components/form/demo/validate-static.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -11450,7 +11367,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
+exports[`renders ./components/form/demo/warning-only.tsx correctly 1`] = `
 <form
   autocomplete="off"
   class="ant-form ant-form-vertical"
@@ -11546,7 +11463,7 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
+exports[`renders ./components/form/demo/without-form-create.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
diff --git a/components/form/__tests__/demo-extend.test.ts b/components/form/__tests__/demo-extend.test.ts
index ef68827bb4..8d11afd95a 100644
--- a/components/form/__tests__/demo-extend.test.ts
+++ b/components/form/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('form', { skip: ['complex-form-control.md', 'dep-debug.md'] });
+extendTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx'] });
diff --git a/components/form/__tests__/demo.test.ts b/components/form/__tests__/demo.test.ts
index 65a7e886e5..d446a1f4a4 100644
--- a/components/form/__tests__/demo.test.ts
+++ b/components/form/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('form', { skip: ['complex-form-control.md', 'dep-debug.md'] });
+demoTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx'] });
diff --git a/components/form/__tests__/image.test.ts b/components/form/__tests__/image.test.ts
index 6df9ac70d4..cd8cbfe132 100644
--- a/components/form/__tests__/image.test.ts
+++ b/components/form/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Form image', () => {
-  imageDemoTest('form', { skip: ['complex-form-control.md'] });
+  imageDemoTest('form', { skip: ['complex-form-control.tsx'] });
 });
diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
index 485febcb61..c124d39ceb 100644
--- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/grid/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-row"
@@ -71,7 +71,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/flex.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -280,7 +280,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-align.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-align.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -435,7 +435,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-order.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-order.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -508,7 +508,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-stretch.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-stretch.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -611,7 +611,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/gutter.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/gutter.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -821,7 +821,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/offset.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/offset.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-row"
@@ -863,7 +863,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/playground.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/playground.tsx extend context correctly 1`] = `
 Array [
   <span>
     Horizontal Gutter (px): 
@@ -1358,7 +1358,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/responsive.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1380,7 +1380,7 @@ exports[`renders ./components/grid/demo/responsive.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/grid/demo/responsive-more.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/responsive-more.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1402,7 +1402,7 @@ exports[`renders ./components/grid/demo/responsive-more.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/grid/demo/sort.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/sort.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1419,7 +1419,7 @@ exports[`renders ./components/grid/demo/sort.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/grid/demo/useBreakpoint.md extend context correctly 1`] = `
+exports[`renders ./components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
 <span
   class="ant-tag ant-tag-blue"
 >
diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
index c6b7aae779..88e6a316a3 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
+exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-row"
@@ -71,7 +71,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
+exports[`renders ./components/grid/demo/flex.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -280,7 +280,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-align.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -435,7 +435,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-order.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -508,7 +508,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
+exports[`renders ./components/grid/demo/flex-stretch.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -611,7 +611,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
+exports[`renders ./components/grid/demo/gutter.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -821,7 +821,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
+exports[`renders ./components/grid/demo/offset.tsx correctly 1`] = `
 Array [
   <div
     class="ant-row"
@@ -863,7 +863,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
+exports[`renders ./components/grid/demo/playground.tsx correctly 1`] = `
 Array [
   <span>
     Horizontal Gutter (px): 
@@ -1286,7 +1286,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/grid/demo/responsive.tsx correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1308,7 +1308,7 @@ exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
+exports[`renders ./components/grid/demo/responsive-more.tsx correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1330,7 +1330,7 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
+exports[`renders ./components/grid/demo/sort.tsx correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -1347,7 +1347,7 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+exports[`renders ./components/grid/demo/useBreakpoint.tsx correctly 1`] = `
 <span
   class="ant-tag ant-tag-blue"
 >
diff --git a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3a831eecbc..826564fc9a 100644
--- a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/icon/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -151,7 +151,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/icon/demo/custom.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -294,7 +294,7 @@ exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`] = `
+exports[`renders ./components/icon/demo/iconfont.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -366,7 +366,7 @@ exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`] = `
+exports[`renders ./components/icon/demo/scriptUrl.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -460,7 +460,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/icon/demo/two-tone.md extend context correctly 1`] = `
+exports[`renders ./components/icon/demo/two-tone.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
diff --git a/components/icon/__tests__/__snapshots__/demo.test.ts.snap b/components/icon/__tests__/__snapshots__/demo.test.ts.snap
index 1a633d572a..ca505a351d 100644
--- a/components/icon/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/icon/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
+exports[`renders ./components/icon/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -151,7 +151,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
+exports[`renders ./components/icon/demo/custom.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -294,7 +294,7 @@ exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
+exports[`renders ./components/icon/demo/iconfont.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -366,7 +366,7 @@ exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
+exports[`renders ./components/icon/demo/scriptUrl.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -460,7 +460,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/icon/demo/two-tone.md correctly 1`] = `
+exports[`renders ./components/icon/demo/two-tone.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
diff --git a/components/icon/__tests__/image.test.ts b/components/icon/__tests__/image.test.ts
index 775b6adc2c..e72b5acab6 100644
--- a/components/icon/__tests__/image.test.ts
+++ b/components/icon/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Icon image', () => {
-  imageDemoTest('icon', { skip: ['basic.md'] });
+  imageDemoTest('icon', { skip: ['basic.tsx'] });
 });
diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
index 03f382841a..aabb7a7bbf 100644
--- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/image/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px;"
@@ -41,7 +41,7 @@ exports[`renders ./components/image/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/image/demo/controlled-preview.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/controlled-preview.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -94,7 +94,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/fallback.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/fallback.tsx extend context correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px; height: 200px;"
@@ -137,7 +137,7 @@ exports[`renders ./components/image/demo/fallback.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/image/demo/placeholder.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/placeholder.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -214,7 +214,7 @@ exports[`renders ./components/image/demo/placeholder.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/image/demo/preview-group.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -295,7 +295,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-group-top-progress.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group-top-progress.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -414,7 +414,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-group-visible.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group-visible.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -569,7 +569,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-mask.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/preview-mask.tsx extend context correctly 1`] = `
 <div
   class="ant-image"
   style="width: 96px;"
@@ -619,7 +619,7 @@ exports[`renders ./components/image/demo/preview-mask.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/image/demo/previewSrc.md extend context correctly 1`] = `
+exports[`renders ./components/image/demo/previewSrc.tsx extend context correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px;"
diff --git a/components/image/__tests__/__snapshots__/demo.test.ts.snap b/components/image/__tests__/__snapshots__/demo.test.ts.snap
index 58fd5b2039..d58c81d21a 100644
--- a/components/image/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/image/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/image/demo/basic.md correctly 1`] = `
+exports[`renders ./components/image/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px;"
@@ -41,7 +41,7 @@ exports[`renders ./components/image/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/image/demo/controlled-preview.md correctly 1`] = `
+exports[`renders ./components/image/demo/controlled-preview.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -94,7 +94,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
+exports[`renders ./components/image/demo/fallback.tsx correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px; height: 200px;"
@@ -137,7 +137,7 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
+exports[`renders ./components/image/demo/placeholder.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -214,7 +214,7 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/image/demo/preview-group.md correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group.tsx correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -295,7 +295,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-group-top-progress.md correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group-top-progress.tsx correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -414,7 +414,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-group-visible.md correctly 1`] = `
+exports[`renders ./components/image/demo/preview-group-visible.tsx correctly 1`] = `
 Array [
   <div
     class="ant-image"
@@ -569,7 +569,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
+exports[`renders ./components/image/demo/preview-mask.tsx correctly 1`] = `
 <div
   class="ant-image"
   style="width: 96px;"
@@ -619,7 +619,7 @@ exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/image/demo/previewSrc.md correctly 1`] = `
+exports[`renders ./components/image/demo/previewSrc.tsx correctly 1`] = `
 <div
   class="ant-image"
   style="width: 200px;"
diff --git a/components/image/demo/preview-group-top-progress.tsx b/components/image/demo/preview-group-top-progress.tsx
index 36db89890c..9c41f07fe9 100644
--- a/components/image/demo/preview-group-top-progress.tsx
+++ b/components/image/demo/preview-group-top-progress.tsx
@@ -1,5 +1,7 @@
 /*
- * debug: true */import { Image } from 'antd';
+ * debug: true */
+import React from 'react';
+import { Image } from 'antd';
 
 const App = () => (
   <Image.PreviewGroup
diff --git a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
index ab1b4179f8..1365065916 100644
--- a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/input-number/demo/addon.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/addon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -852,7 +852,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-input-number"
 >
@@ -931,7 +931,7 @@ exports[`renders ./components/input-number/demo/basic.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/borderless.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/borderless.tsx extend context correctly 1`] = `
 <div
   class="ant-input-number ant-input-number-borderless"
 >
@@ -1010,7 +1010,7 @@ exports[`renders ./components/input-number/demo/borderless.md extend context cor
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/controls.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/controls.tsx extend context correctly 1`] = `
 <div
   class="ant-input-number"
 >
@@ -1094,7 +1094,7 @@ exports[`renders ./components/input-number/demo/controls.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/debug-token.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/debug-token.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1256,7 +1256,7 @@ exports[`renders ./components/input-number/demo/debug-token.md extend context co
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/digit.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/digit.tsx extend context correctly 1`] = `
 <div
   class="ant-input-number"
   style="width: 200px;"
@@ -1336,7 +1336,7 @@ exports[`renders ./components/input-number/demo/digit.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-input-number ant-input-number-disabled"
@@ -1430,7 +1430,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input-number/demo/formatter.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/formatter.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1596,7 +1596,7 @@ exports[`renders ./components/input-number/demo/formatter.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/keyboard.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/keyboard.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1708,7 +1708,7 @@ exports[`renders ./components/input-number/demo/keyboard.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/out-of-range.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/out-of-range.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1808,7 +1808,7 @@ exports[`renders ./components/input-number/demo/out-of-range.md extend context c
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/prefix.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/prefix.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-input-number-affix-wrapper"
@@ -2098,7 +2098,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input-number/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="display: flex; flex-direction: column; row-gap: 16px;"
 >
@@ -2179,7 +2179,7 @@ exports[`renders ./components/input-number/demo/render-panel.md extend context c
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/size.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -2428,7 +2428,7 @@ exports[`renders ./components/input-number/demo/size.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/input-number/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.ts.snap b/components/input-number/__tests__/__snapshots__/demo.test.ts.snap
index 6830c7397b..4734b411fc 100644
--- a/components/input-number/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/input-number/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/addon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -580,7 +580,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-input-number"
 >
@@ -659,7 +659,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/borderless.tsx correctly 1`] = `
 <div
   class="ant-input-number ant-input-number-borderless"
 >
@@ -738,7 +738,7 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/controls.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/controls.tsx correctly 1`] = `
 <div
   class="ant-input-number"
 >
@@ -822,7 +822,7 @@ exports[`renders ./components/input-number/demo/controls.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/debug-token.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/debug-token.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -984,7 +984,7 @@ exports[`renders ./components/input-number/demo/debug-token.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/digit.tsx correctly 1`] = `
 <div
   class="ant-input-number"
   style="width: 200px;"
@@ -1064,7 +1064,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/disabled.tsx correctly 1`] = `
 Array [
   <div
     class="ant-input-number ant-input-number-disabled"
@@ -1158,7 +1158,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/formatter.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1324,7 +1324,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/keyboard.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1436,7 +1436,7 @@ exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/out-of-range.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1536,7 +1536,7 @@ exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/prefix.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/prefix.tsx correctly 1`] = `
 Array [
   <div
     class="ant-input-number-affix-wrapper"
@@ -1826,7 +1826,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input-number/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/render-panel.tsx correctly 1`] = `
 <div
   style="display: flex; flex-direction: column; row-gap: 16px;"
 >
@@ -1907,7 +1907,7 @@ exports[`renders ./components/input-number/demo/render-panel.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/size.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -2156,7 +2156,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input-number/demo/status.md correctly 1`] = `
+exports[`renders ./components/input-number/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
diff --git a/components/input-number/demo/debug-token.tsx b/components/input-number/demo/debug-token.tsx
index 5ec8145519..905c57d620 100644
--- a/components/input-number/demo/debug-token.tsx
+++ b/components/input-number/demo/debug-token.tsx
@@ -1,5 +1,7 @@
 /*
- * debug: true */import { ConfigProvider, InputNumber, Space } from 'antd';
+ * debug: true */
+import React from 'react';
+import { ConfigProvider, InputNumber, Space } from 'antd';
 
 export default () => (
   <ConfigProvider
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2aaf6ba804..90f8856966 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/input/demo/addon.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/addon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -606,7 +606,7 @@ exports[`renders ./components/input/demo/addon.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input/demo/align.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/align.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-mentions"
@@ -4847,7 +4847,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/allowClear.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/allowClear.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -4921,7 +4921,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/autosize-textarea.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/autosize-textarea.tsx extend context correctly 1`] = `
 Array [
   <textarea
     class="ant-input"
@@ -4944,7 +4944,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/basic.tsx extend context correctly 1`] = `
 <input
   class="ant-input"
   placeholder="Basic usage"
@@ -4953,7 +4953,7 @@ exports[`renders ./components/input/demo/basic.md extend context correctly 1`] =
 />
 `;
 
-exports[`renders ./components/input/demo/borderless.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/borderless.tsx extend context correctly 1`] = `
 <input
   class="ant-input ant-input-borderless"
   placeholder="Borderless"
@@ -4962,7 +4962,7 @@ exports[`renders ./components/input/demo/borderless.md extend context correctly
 />
 `;
 
-exports[`renders ./components/input/demo/borderless-debug.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/borderless-debug.tsx extend context correctly 1`] = `
 <div
   style="background-color: rgba(0, 0, 128, 0.2);"
 >
@@ -5091,7 +5091,7 @@ exports[`renders ./components/input/demo/borderless-debug.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/input/demo/focus.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/focus.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -5206,7 +5206,7 @@ exports[`renders ./components/input/demo/focus.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input/demo/group.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/group.tsx extend context correctly 1`] = `
 <div
   class="site-input-group-wrapper"
 >
@@ -8673,7 +8673,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input/demo/password-input.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/password-input.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -8765,7 +8765,7 @@ exports[`renders ./components/input/demo/password-input.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/input/demo/presuffix.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/presuffix.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -8897,7 +8897,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/search-input.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/search-input.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -9288,7 +9288,7 @@ exports[`renders ./components/input/demo/search-input.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/input/demo/search-input-loading.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/search-input-loading.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-input-group-wrapper ant-input-search"
@@ -9439,7 +9439,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/show-count.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/show-count.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -9473,7 +9473,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/size.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
@@ -9581,7 +9581,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -9692,7 +9692,7 @@ exports[`renders ./components/input/demo/status.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/input/demo/textarea.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/textarea.tsx extend context correctly 1`] = `
 Array [
   <textarea
     class="ant-input"
@@ -9708,7 +9708,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/textarea-resize.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/textarea-resize.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -9756,7 +9756,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/textarea-show-count.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/textarea-show-count.tsx extend context correctly 1`] = `
 <div
   class="ant-input-textarea ant-input-textarea-show-count"
   data-count="0 / 100"
@@ -9768,7 +9768,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md extend context c
 </div>
 `;
 
-exports[`renders ./components/input/demo/tooltip.md extend context correctly 1`] = `
+exports[`renders ./components/input/demo/tooltip.tsx extend context correctly 1`] = `
 Array [
   <input
     class="ant-input"
diff --git a/components/input/__tests__/__snapshots__/demo.test.ts.snap b/components/input/__tests__/__snapshots__/demo.test.ts.snap
index a327ad05cb..15ea8aab80 100644
--- a/components/input/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/input/demo/addon.md correctly 1`] = `
+exports[`renders ./components/input/demo/addon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -334,7 +334,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/align.md correctly 1`] = `
+exports[`renders ./components/input/demo/align.tsx correctly 1`] = `
 Array [
   <div
     class="ant-mentions"
@@ -1066,7 +1066,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/allowClear.md correctly 1`] = `
+exports[`renders ./components/input/demo/allowClear.tsx correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -1140,7 +1140,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
+exports[`renders ./components/input/demo/autosize-textarea.tsx correctly 1`] = `
 Array [
   <textarea
     class="ant-input"
@@ -1163,7 +1163,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/basic.md correctly 1`] = `
+exports[`renders ./components/input/demo/basic.tsx correctly 1`] = `
 <input
   class="ant-input"
   placeholder="Basic usage"
@@ -1172,7 +1172,7 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `
 />
 `;
 
-exports[`renders ./components/input/demo/borderless.md correctly 1`] = `
+exports[`renders ./components/input/demo/borderless.tsx correctly 1`] = `
 <input
   class="ant-input ant-input-borderless"
   placeholder="Borderless"
@@ -1181,7 +1181,7 @@ exports[`renders ./components/input/demo/borderless.md correctly 1`] = `
 />
 `;
 
-exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
+exports[`renders ./components/input/demo/borderless-debug.tsx correctly 1`] = `
 <div
   style="background-color: rgba(0, 0, 128, 0.2);"
 >
@@ -1310,7 +1310,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/focus.md correctly 1`] = `
+exports[`renders ./components/input/demo/focus.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1425,7 +1425,7 @@ exports[`renders ./components/input/demo/focus.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/group.md correctly 1`] = `
+exports[`renders ./components/input/demo/group.tsx correctly 1`] = `
 <div
   class="site-input-group-wrapper"
 >
@@ -2480,7 +2480,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/password-input.md correctly 1`] = `
+exports[`renders ./components/input/demo/password-input.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2572,7 +2572,7 @@ exports[`renders ./components/input/demo/password-input.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
+exports[`renders ./components/input/demo/presuffix.tsx correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -2680,7 +2680,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
+exports[`renders ./components/input/demo/search-input.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -3071,7 +3071,7 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `
+exports[`renders ./components/input/demo/search-input-loading.tsx correctly 1`] = `
 Array [
   <span
     class="ant-input-group-wrapper ant-input-search"
@@ -3222,7 +3222,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/show-count.md correctly 1`] = `
+exports[`renders ./components/input/demo/show-count.tsx correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper"
@@ -3256,7 +3256,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/size.md correctly 1`] = `
+exports[`renders ./components/input/demo/size.tsx correctly 1`] = `
 Array [
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
@@ -3364,7 +3364,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/status.md correctly 1`] = `
+exports[`renders ./components/input/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -3475,7 +3475,7 @@ exports[`renders ./components/input/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/textarea.md correctly 1`] = `
+exports[`renders ./components/input/demo/textarea.tsx correctly 1`] = `
 Array [
   <textarea
     class="ant-input"
@@ -3491,7 +3491,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
+exports[`renders ./components/input/demo/textarea-resize.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -3539,7 +3539,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] = `
+exports[`renders ./components/input/demo/textarea-show-count.tsx correctly 1`] = `
 <div
   class="ant-input-textarea ant-input-textarea-show-count"
   data-count="0 / 100"
@@ -3551,7 +3551,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `
+exports[`renders ./components/input/demo/tooltip.tsx correctly 1`] = `
 <input
   class="ant-input"
   maxlength="16"
diff --git a/components/input/__tests__/image.test.ts b/components/input/__tests__/image.test.ts
index 9db299c0f4..57df06baf9 100644
--- a/components/input/__tests__/image.test.ts
+++ b/components/input/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Input image', () => {
-  imageDemoTest('input', { skip: ['search-input-loading.md'] });
+  imageDemoTest('input', { skip: ['search-input-loading.tsx'] });
 });
diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index 362224769d..0f30da072b 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/layout/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <section
     class="ant-layout"
@@ -123,7 +123,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/layout/demo/custom-trigger.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/custom-trigger.tsx extend context correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -417,7 +417,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md extend context corre
 </section>
 `;
 
-exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`] = `
 <section
   class="ant-layout"
 >
@@ -724,7 +724,7 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
 </section>
 `;
 
-exports[`renders ./components/layout/demo/fixed-sider.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -1591,7 +1591,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md extend context correctl
 </section>
 `;
 
-exports[`renders ./components/layout/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/responsive.tsx extend context correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -1990,7 +1990,7 @@ exports[`renders ./components/layout/demo/responsive.md extend context correctly
 </section>
 `;
 
-exports[`renders ./components/layout/demo/side.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
   style="min-height: 100vh;"
@@ -2727,7 +2727,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] = `
 <section
   class="ant-layout layout"
 >
@@ -3704,7 +3704,7 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top-side.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/top-side.tsx extend context correctly 1`] = `
 <section
   class="ant-layout"
 >
@@ -5035,7 +5035,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top-side-2.md extend context correctly 1`] = `
+exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctly 1`] = `
 <section
   class="ant-layout"
 >
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index b6fbe8003b..02065e5c9d 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
+exports[`renders ./components/layout/demo/basic.tsx correctly 1`] = `
 Array [
   <section
     class="ant-layout"
@@ -123,7 +123,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
+exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -284,7 +284,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
+exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
 <section
   class="ant-layout"
 >
@@ -446,7 +446,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
+exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -960,7 +960,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
 >
@@ -1166,7 +1166,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/side.md correctly 1`] = `
+exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
 <section
   class="ant-layout ant-layout-has-sider"
   style="min-height: 100vh;"
@@ -1459,7 +1459,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top.md correctly 1`] = `
+exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
 <section
   class="ant-layout layout"
 >
@@ -1763,7 +1763,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
+exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
 <section
   class="ant-layout"
 >
@@ -2137,7 +2137,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
 </section>
 `;
 
-exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
+exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
 <section
   class="ant-layout"
 >
diff --git a/components/layout/__tests__/demo-extend.test.ts b/components/layout/__tests__/demo-extend.test.ts
index ea26820fef..6f18f8650e 100644
--- a/components/layout/__tests__/demo-extend.test.ts
+++ b/components/layout/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('layout', { skip: ['custom-trigger-debug.md'] });
+extendTest('layout', { skip: ['custom-trigger-debug.tsx'] });
diff --git a/components/layout/__tests__/demo.test.ts b/components/layout/__tests__/demo.test.ts
index 9e7b09b4e1..3fce8a6727 100644
--- a/components/layout/__tests__/demo.test.ts
+++ b/components/layout/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('layout', { skip: ['custom-trigger-debug.md'] });
+demoTest('layout', { skip: ['custom-trigger-debug.tsx'] });
diff --git a/components/layout/__tests__/image.test.ts b/components/layout/__tests__/image.test.ts
index 4013073eb5..b495e17129 100644
--- a/components/layout/__tests__/image.test.ts
+++ b/components/layout/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Layout image', () => {
-  imageDemoTest('layout', { skip: ['fixed-sider.md'] });
+  imageDemoTest('layout', { skip: ['fixed-sider.tsx'] });
 });
diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
index 075e9f52d4..37a9af320e 100644
--- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/list/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-split"
 >
@@ -167,7 +167,7 @@ exports[`renders ./components/list/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/grid.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-grid"
 >
@@ -327,7 +327,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/grid-test.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/grid-test.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-list ant-list-split ant-list-grid"
@@ -1019,7 +1019,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/list/demo/infinite-load.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/infinite-load.tsx extend context correctly 1`] = `
 <div
   id="scrollableDiv"
   style="height: 400px; overflow: auto; padding: 0px 16px; border: 1px solid rgba(140, 140, 140, 0.35);"
@@ -1121,7 +1121,7 @@ exports[`renders ./components/list/demo/infinite-load.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/list/demo/loadmore.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/loadmore.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-loading demo-loadmore-list"
 >
@@ -1163,7 +1163,7 @@ exports[`renders ./components/list/demo/loadmore.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/list/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/responsive.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-grid"
 >
@@ -1393,7 +1393,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/list/demo/simple.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/simple.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -1628,7 +1628,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/list/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"
 >
@@ -2332,7 +2332,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/list/demo/virtual-list.md extend context correctly 1`] = `
+exports[`renders ./components/list/demo/virtual-list.tsx extend context correctly 1`] = `
 <div
   class="ant-list ant-list-split"
 >
diff --git a/components/list/__tests__/__snapshots__/demo.test.ts.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap
index 2f3317e92b..d331394dc3 100644
--- a/components/list/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/list/demo/basic.md correctly 1`] = `
+exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split"
 >
@@ -167,7 +167,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/grid.md correctly 1`] = `
+exports[`renders ./components/list/demo/grid.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-grid"
 >
@@ -327,7 +327,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/grid-test.md correctly 1`] = `
+exports[`renders ./components/list/demo/grid-test.tsx correctly 1`] = `
 Array [
   <div
     class="ant-list ant-list-split ant-list-grid"
@@ -1019,7 +1019,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
+exports[`renders ./components/list/demo/infinite-load.tsx correctly 1`] = `
 <div
   id="scrollableDiv"
   style="height: 400px; overflow: auto; padding: 0px 16px; border: 1px solid rgba(140, 140, 140, 0.35);"
@@ -1121,7 +1121,7 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
+exports[`renders ./components/list/demo/loadmore.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-loading demo-loadmore-list"
 >
@@ -1163,7 +1163,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/list/demo/responsive.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split ant-list-grid"
 >
@@ -1393,7 +1393,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/simple.md correctly 1`] = `
+exports[`renders ./components/list/demo/simple.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -1628,7 +1628,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"
 >
@@ -2332,7 +2332,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/list/demo/virtual-list.md correctly 1`] = `
+exports[`renders ./components/list/demo/virtual-list.tsx correctly 1`] = `
 <div
   class="ant-list ant-list-split"
 >
diff --git a/components/list/__tests__/image.test.ts b/components/list/__tests__/image.test.ts
index bd7b341306..d024e971c8 100644
--- a/components/list/__tests__/image.test.ts
+++ b/components/list/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('List image', () => {
-  imageDemoTest('list', { skip: ['loadmore.md'] });
+  imageDemoTest('list', { skip: ['loadmore.tsx'] });
 });
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 46c003777e..ef83d74e5e 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/mentions/demo/async.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/async.tsx extend context correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -12,7 +12,7 @@ exports[`renders ./components/mentions/demo/async.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/autoSize.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/autoSize.tsx extend context correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -24,7 +24,7 @@ exports[`renders ./components/mentions/demo/autoSize.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -38,7 +38,7 @@ exports[`renders ./components/mentions/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/form.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/form.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -163,7 +163,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
 </form>
 `;
 
-exports[`renders ./components/mentions/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/placement.tsx extend context correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -175,7 +175,7 @@ exports[`renders ./components/mentions/demo/placement.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/prefix.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/prefix.tsx extend context correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -188,7 +188,7 @@ exports[`renders ./components/mentions/demo/prefix.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/readonly.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/readonly.tsx extend context correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 10px;"
@@ -219,7 +219,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/mentions/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -281,7 +281,7 @@ exports[`renders ./components/mentions/demo/render-panel.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/mentions/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
index 4f38710ce6..6e9470a230 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/mentions/demo/async.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/async.tsx correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -12,7 +12,7 @@ exports[`renders ./components/mentions/demo/async.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/autoSize.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/autoSize.tsx correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -24,7 +24,7 @@ exports[`renders ./components/mentions/demo/autoSize.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -38,7 +38,7 @@ exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/form.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
@@ -163,7 +163,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/mentions/demo/placement.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/placement.tsx correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -175,7 +175,7 @@ exports[`renders ./components/mentions/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/prefix.tsx correctly 1`] = `
 <div
   class="ant-mentions"
   style="width: 100%;"
@@ -188,7 +188,7 @@ exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/readonly.tsx correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 10px;"
@@ -219,7 +219,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/mentions/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -281,7 +281,7 @@ exports[`renders ./components/mentions/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/mentions/demo/status.md correctly 1`] = `
+exports[`renders ./components/mentions/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index c351d60560..b21fd9a61c 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/menu/demo/deprecated.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/deprecated.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
@@ -274,7 +274,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/horizontal.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/horizontal.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
@@ -685,7 +685,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/inline.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/inline.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
@@ -1794,7 +1794,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/inline-collapsed.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/inline-collapsed.tsx extend context correctly 1`] = `
 <div
   style="width: 256px;"
 >
@@ -2817,7 +2817,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/menu/demo/sider-current.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/sider-current.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
@@ -3870,7 +3870,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/style-debug.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/style-debug.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -4191,7 +4191,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/submenu-theme.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/submenu-theme.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -4571,7 +4571,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/switch-mode.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/switch-mode.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -5657,7 +5657,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/theme.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/theme.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -6736,7 +6736,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/menu/demo/vertical.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light"
diff --git a/components/menu/__tests__/__snapshots__/demo.test.ts.snap b/components/menu/__tests__/__snapshots__/demo.test.ts.snap
index 0b957c01b5..488703f0d0 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/menu/demo/deprecated.md correctly 1`] = `
+exports[`renders ./components/menu/demo/deprecated.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
@@ -129,7 +129,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
+exports[`renders ./components/menu/demo/horizontal.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
@@ -307,7 +307,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
+exports[`renders ./components/menu/demo/inline.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
@@ -539,7 +539,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
+exports[`renders ./components/menu/demo/inline-collapsed.tsx correctly 1`] = `
 <div
   style="width: 256px;"
 >
@@ -822,7 +822,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
+exports[`renders ./components/menu/demo/sider-current.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
@@ -1026,7 +1026,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/style-debug.md correctly 1`] = `
+exports[`renders ./components/menu/demo/style-debug.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -1180,7 +1180,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/submenu-theme.md correctly 1`] = `
+exports[`renders ./components/menu/demo/submenu-theme.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -1290,7 +1290,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
+exports[`renders ./components/menu/demo/switch-mode.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -1597,7 +1597,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
+exports[`renders ./components/menu/demo/theme.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -1827,7 +1827,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/menu/demo/vertical.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light"
diff --git a/components/menu/demo/deprecated.tsx b/components/menu/demo/deprecated.tsx
index 35d0479754..6f9b31a846 100644
--- a/components/menu/demo/deprecated.tsx
+++ b/components/menu/demo/deprecated.tsx
@@ -1,5 +1,7 @@
 /*
- * version: < 4.20.0 */import { Menu } from 'antd';
+ * version: < 4.20.0 */
+import React from 'react';
+import { Menu } from 'antd';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
 
 const App = () => (
diff --git a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
index 267c1ce8b4..462e9c7b87 100644
--- a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/message/demo/custom-style.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/custom-style.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/message/demo/custom-style.md extend context correc
 </button>
 `;
 
-exports[`renders ./components/message/demo/duration.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/duration.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/message/demo/duration.md extend context correctly
 </button>
 `;
 
-exports[`renders ./components/message/demo/hooks.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/hooks.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/message/demo/hooks.md extend context correctly 1`]
 </button>
 `;
 
-exports[`renders ./components/message/demo/info.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/info.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -44,7 +44,7 @@ exports[`renders ./components/message/demo/info.md extend context correctly 1`]
 </button>
 `;
 
-exports[`renders ./components/message/demo/loading.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/loading.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -55,7 +55,7 @@ exports[`renders ./components/message/demo/loading.md extend context correctly 1
 </button>
 `;
 
-exports[`renders ./components/message/demo/other.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/other.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -100,7 +100,7 @@ exports[`renders ./components/message/demo/other.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/message/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   class="ant-message-notice ant-message-notice-pure-panel"
 >
@@ -137,7 +137,7 @@ exports[`renders ./components/message/demo/render-panel.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/message/demo/thenable.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/thenable.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -148,7 +148,7 @@ exports[`renders ./components/message/demo/thenable.md extend context correctly
 </button>
 `;
 
-exports[`renders ./components/message/demo/update.md extend context correctly 1`] = `
+exports[`renders ./components/message/demo/update.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
diff --git a/components/message/__tests__/__snapshots__/demo.test.ts.snap b/components/message/__tests__/__snapshots__/demo.test.ts.snap
index 7e4199a43e..0565cc58b3 100644
--- a/components/message/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/message/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/message/demo/custom-style.md correctly 1`] = `
+exports[`renders ./components/message/demo/custom-style.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/message/demo/custom-style.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/duration.md correctly 1`] = `
+exports[`renders ./components/message/demo/duration.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/message/demo/duration.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/hooks.md correctly 1`] = `
+exports[`renders ./components/message/demo/hooks.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/message/demo/hooks.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/info.md correctly 1`] = `
+exports[`renders ./components/message/demo/info.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -44,7 +44,7 @@ exports[`renders ./components/message/demo/info.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/loading.md correctly 1`] = `
+exports[`renders ./components/message/demo/loading.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -55,7 +55,7 @@ exports[`renders ./components/message/demo/loading.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/other.md correctly 1`] = `
+exports[`renders ./components/message/demo/other.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -100,7 +100,7 @@ exports[`renders ./components/message/demo/other.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/message/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/message/demo/render-panel.tsx correctly 1`] = `
 <div
   class="ant-message-notice ant-message-notice-pure-panel"
 >
@@ -137,7 +137,7 @@ exports[`renders ./components/message/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
+exports[`renders ./components/message/demo/thenable.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -148,7 +148,7 @@ exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/message/demo/update.md correctly 1`] = `
+exports[`renders ./components/message/demo/update.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
diff --git a/components/message/demo/render-panel.tsx b/components/message/demo/render-panel.tsx
index fe582ec9ae..094a437ac9 100644
--- a/components/message/demo/render-panel.tsx
+++ b/components/message/demo/render-panel.tsx
@@ -1,5 +1,7 @@
 /*
- * debug: true */import { message } from 'antd';
+ * debug: true */
+import React from 'react';
+import { message } from 'antd';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 292815a36f..c4f6b9a465 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/modal/demo/async.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/async.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/modal/demo/async.md extend context correctly 1`] =
 </button>
 `;
 
-exports[`renders ./components/modal/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/basic.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/modal/demo/basic.md extend context correctly 1`] =
 </button>
 `;
 
-exports[`renders ./components/modal/demo/button-props.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/button-props.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/modal/demo/button-props.md extend context correctl
 </button>
 `;
 
-exports[`renders ./components/modal/demo/confirm.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/confirm.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -93,7 +93,7 @@ exports[`renders ./components/modal/demo/confirm.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/modal/demo/confirm-router.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/confirm-router.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -104,7 +104,7 @@ exports[`renders ./components/modal/demo/confirm-router.md extend context correc
 </button>
 `;
 
-exports[`renders ./components/modal/demo/dark.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/dark.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -115,7 +115,7 @@ exports[`renders ./components/modal/demo/dark.md extend context correctly 1`] =
 </button>
 `;
 
-exports[`renders ./components/modal/demo/footer.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/footer.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -126,7 +126,7 @@ exports[`renders ./components/modal/demo/footer.md extend context correctly 1`]
 </button>
 `;
 
-exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/hooks.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -184,7 +184,7 @@ exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/modal/demo/info.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/info.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -244,7 +244,7 @@ exports[`renders ./components/modal/demo/info.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/modal/demo/locale.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/locale.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -276,7 +276,7 @@ exports[`renders ./components/modal/demo/locale.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/modal/demo/manual.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/manual.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -287,7 +287,7 @@ exports[`renders ./components/modal/demo/manual.md extend context correctly 1`]
 </button>
 `;
 
-exports[`renders ./components/modal/demo/modal-render.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/modal-render.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -298,7 +298,7 @@ exports[`renders ./components/modal/demo/modal-render.md extend context correctl
 </button>
 `;
 
-exports[`renders ./components/modal/demo/position.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/position.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -321,7 +321,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/modal/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="display: flex; flex-direction: column; row-gap: 16px;"
 >
@@ -563,7 +563,7 @@ exports[`renders ./components/modal/demo/render-panel.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/modal/demo/width.md extend context correctly 1`] = `
+exports[`renders ./components/modal/demo/width.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
diff --git a/components/modal/__tests__/__snapshots__/demo.test.ts.snap b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
index 775feab2ce..7527239e60 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/modal/demo/async.md correctly 1`] = `
+exports[`renders ./components/modal/demo/async.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/modal/demo/async.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
+exports[`renders ./components/modal/demo/basic.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/button-props.md correctly 1`] = `
+exports[`renders ./components/modal/demo/button-props.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/modal/demo/button-props.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
+exports[`renders ./components/modal/demo/confirm.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -93,7 +93,7 @@ exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/confirm-router.md correctly 1`] = `
+exports[`renders ./components/modal/demo/confirm-router.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -104,7 +104,7 @@ exports[`renders ./components/modal/demo/confirm-router.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/dark.md correctly 1`] = `
+exports[`renders ./components/modal/demo/dark.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -115,7 +115,7 @@ exports[`renders ./components/modal/demo/dark.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
+exports[`renders ./components/modal/demo/footer.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -126,7 +126,7 @@ exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
+exports[`renders ./components/modal/demo/hooks.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -184,7 +184,7 @@ exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/info.md correctly 1`] = `
+exports[`renders ./components/modal/demo/info.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -244,7 +244,7 @@ exports[`renders ./components/modal/demo/info.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
+exports[`renders ./components/modal/demo/locale.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -276,7 +276,7 @@ exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
+exports[`renders ./components/modal/demo/manual.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -287,7 +287,7 @@ exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/modal-render.md correctly 1`] = `
+exports[`renders ./components/modal/demo/modal-render.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -298,7 +298,7 @@ exports[`renders ./components/modal/demo/modal-render.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/modal/demo/position.md correctly 1`] = `
+exports[`renders ./components/modal/demo/position.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -321,7 +321,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/modal/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/modal/demo/render-panel.tsx correctly 1`] = `
 <div
   style="display: flex; flex-direction: column; row-gap: 16px;"
 >
@@ -563,7 +563,7 @@ exports[`renders ./components/modal/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/width.md correctly 1`] = `
+exports[`renders ./components/modal/demo/width.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
diff --git a/components/modal/demo/dark.tsx b/components/modal/demo/dark.tsx
index b42d1133a8..5e86997367 100644
--- a/components/modal/demo/dark.tsx
+++ b/components/modal/demo/dark.tsx
@@ -1,5 +1,7 @@
+// @ts-nocheck
 /*
- * debug: true */import { useState } from 'react';
+ * debug: true */
+import React, { useState } from 'react';
 import {
   Modal,
   DatePicker,
diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
index 47ba96eceb..7d88885549 100644
--- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/notification/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/basic.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/notification/demo/basic.md extend context correctl
 </button>
 `;
 
-exports[`renders ./components/notification/demo/custom-icon.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/custom-icon.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/notification/demo/custom-icon.md extend context co
 </button>
 `;
 
-exports[`renders ./components/notification/demo/custom-style.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/custom-style.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/notification/demo/custom-style.md extend context c
 </button>
 `;
 
-exports[`renders ./components/notification/demo/duration.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/duration.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -44,7 +44,7 @@ exports[`renders ./components/notification/demo/duration.md extend context corre
 </button>
 `;
 
-exports[`renders ./components/notification/demo/hooks.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/hooks.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -187,7 +187,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -401,7 +401,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/notification/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   class="ant-notification-notice ant-notification-notice-pure-panel ant-notification-notice-closable"
 >
@@ -486,7 +486,7 @@ exports[`renders ./components/notification/demo/render-panel.md extend context c
 </div>
 `;
 
-exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/update.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -497,7 +497,7 @@ exports[`renders ./components/notification/demo/update.md extend context correct
 </button>
 `;
 
-exports[`renders ./components/notification/demo/with-btn.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/with-btn.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -508,7 +508,7 @@ exports[`renders ./components/notification/demo/with-btn.md extend context corre
 </button>
 `;
 
-exports[`renders ./components/notification/demo/with-icon.md extend context correctly 1`] = `
+exports[`renders ./components/notification/demo/with-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
diff --git a/components/notification/__tests__/__snapshots__/demo.test.ts.snap b/components/notification/__tests__/__snapshots__/demo.test.ts.snap
index 7a8f36af8b..f4aac690c3 100644
--- a/components/notification/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/notification/demo/basic.md correctly 1`] = `
+exports[`renders ./components/notification/demo/basic.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/notification/demo/basic.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/notification/demo/custom-icon.md correctly 1`] = `
+exports[`renders ./components/notification/demo/custom-icon.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -22,7 +22,7 @@ exports[`renders ./components/notification/demo/custom-icon.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/notification/demo/custom-style.md correctly 1`] = `
+exports[`renders ./components/notification/demo/custom-style.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -33,7 +33,7 @@ exports[`renders ./components/notification/demo/custom-style.md correctly 1`] =
 </button>
 `;
 
-exports[`renders ./components/notification/demo/duration.md correctly 1`] = `
+exports[`renders ./components/notification/demo/duration.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -44,7 +44,7 @@ exports[`renders ./components/notification/demo/duration.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/notification/demo/hooks.md correctly 1`] = `
+exports[`renders ./components/notification/demo/hooks.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -187,7 +187,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
+exports[`renders ./components/notification/demo/placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -401,7 +401,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/notification/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/notification/demo/render-panel.tsx correctly 1`] = `
 <div
   class="ant-notification-notice ant-notification-notice-pure-panel ant-notification-notice-closable"
 >
@@ -486,7 +486,7 @@ exports[`renders ./components/notification/demo/render-panel.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/notification/demo/update.md correctly 1`] = `
+exports[`renders ./components/notification/demo/update.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -497,7 +497,7 @@ exports[`renders ./components/notification/demo/update.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/notification/demo/with-btn.md correctly 1`] = `
+exports[`renders ./components/notification/demo/with-btn.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -508,7 +508,7 @@ exports[`renders ./components/notification/demo/with-btn.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
+exports[`renders ./components/notification/demo/with-icon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
diff --git a/components/notification/demo/render-panel.tsx b/components/notification/demo/render-panel.tsx
index 2077dbf05a..22577c8ec9 100644
--- a/components/notification/demo/render-panel.tsx
+++ b/components/notification/demo/render-panel.tsx
@@ -1,5 +1,7 @@
 /*
- * debug: true */import { Button, notification } from 'antd';
+ * debug: true */
+import React from 'react';
+import { Button, notification } from 'antd';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = notification;
diff --git a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
index d28d52c3d5..fc2f982d71 100644
--- a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/pagination/demo/all.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -378,7 +378,7 @@ exports[`renders ./components/pagination/demo/all.md extend context correctly 1`
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/basic.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -505,7 +505,7 @@ exports[`renders ./components/pagination/demo/basic.md extend context correctly
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/changer.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/changer.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
@@ -1230,7 +1230,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/controlled.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/controlled.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -1357,7 +1357,7 @@ exports[`renders ./components/pagination/demo/controlled.md extend context corre
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/itemRender.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/itemRender.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -1676,7 +1676,7 @@ exports[`renders ./components/pagination/demo/itemRender.md extend context corre
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/jump.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/jump.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
@@ -2424,7 +2424,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/mini.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/mini.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-pagination ant-pagination-mini"
@@ -3331,7 +3331,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/more.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/more.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -3742,7 +3742,7 @@ exports[`renders ./components/pagination/demo/more.md extend context correctly 1
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/simple.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/simple.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-pagination ant-pagination-simple"
@@ -3917,7 +3917,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/total.md extend context correctly 1`] = `
+exports[`renders ./components/pagination/demo/total.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
index a394a7f543..41c2e57699 100644
--- a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/all.tsx correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -259,7 +259,7 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -386,7 +386,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/changer.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
@@ -873,7 +873,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/controlled.tsx correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -1000,7 +1000,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/itemRender.tsx correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -1200,7 +1200,7 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/jump.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
@@ -1710,7 +1710,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/mini.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-pagination ant-pagination-mini"
@@ -2379,7 +2379,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/more.tsx correctly 1`] = `
 <ul
   class="ant-pagination"
   unselectable="unselectable"
@@ -2671,7 +2671,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/simple.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-pagination ant-pagination-simple"
@@ -2846,7 +2846,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
+exports[`renders ./components/pagination/demo/total.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-pagination"
diff --git a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
index 935afc1454..8a37eb09ca 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/popconfirm/demo/async.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/async.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -88,7 +88,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <a
     href="#"
@@ -173,7 +173,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/dynamic-trigger.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx extend context correctly 1`] = `
 <div>
   <a
     href="#"
@@ -281,7 +281,7 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md extend context
 </div>
 `;
 
-exports[`renders ./components/popconfirm/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/icon.tsx extend context correctly 1`] = `
 Array [
   <a
     href="#"
@@ -370,7 +370,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/locale.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/locale.tsx extend context correctly 1`] = `
 Array [
   <a
     href="#"
@@ -455,7 +455,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
 <div
   class="demo"
 >
@@ -1474,7 +1474,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/popconfirm/demo/promise.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/promise.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -1562,7 +1562,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/render-panel.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
index b28e2c373c..9c7ab8351c 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/popconfirm/demo/async.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/async.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -11,7 +11,7 @@ exports[`renders ./components/popconfirm/demo/async.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/popconfirm/demo/basic.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/basic.tsx correctly 1`] = `
 <a
   href="#"
 >
@@ -19,7 +19,7 @@ exports[`renders ./components/popconfirm/demo/basic.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx correctly 1`] = `
 <div>
   <a
     href="#"
@@ -52,7 +52,7 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/popconfirm/demo/icon.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/icon.tsx correctly 1`] = `
 <a
   href="#"
 >
@@ -60,7 +60,7 @@ exports[`renders ./components/popconfirm/demo/icon.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/popconfirm/demo/locale.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/locale.tsx correctly 1`] = `
 <a
   href="#"
 >
@@ -68,7 +68,7 @@ exports[`renders ./components/popconfirm/demo/locale.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
 <div
   class="demo"
 >
@@ -187,7 +187,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/popconfirm/demo/promise.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/promise.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -198,7 +198,7 @@ exports[`renders ./components/popconfirm/demo/promise.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/popconfirm/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/render-panel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 42e275839c..f5c425719b 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/popover/demo/arrow-point-at-center.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/arrow-point-at-center.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -97,7 +97,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -150,7 +150,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/control.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/control.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-primary"
@@ -198,7 +198,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/hover-with-click.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/hover-with-click.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -286,7 +286,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/placement.tsx extend context correctly 1`] = `
 <div
   class="demo"
 >
@@ -909,7 +909,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/popover/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/render-panel.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top"
@@ -981,7 +981,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/triggerType.md extend context correctly 1`] = `
+exports[`renders ./components/popover/demo/triggerType.tsx extend context correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-default"
diff --git a/components/popover/__tests__/__snapshots__/demo.test.ts.snap b/components/popover/__tests__/__snapshots__/demo.test.ts.snap
index df4b2705c6..d974efc9fa 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`] = `
+exports[`renders ./components/popover/demo/arrow-point-at-center.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -21,7 +21,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/basic.md correctly 1`] = `
+exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -32,7 +32,7 @@ exports[`renders ./components/popover/demo/basic.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/popover/demo/control.md correctly 1`] = `
+exports[`renders ./components/popover/demo/control.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -43,7 +43,7 @@ exports[`renders ./components/popover/demo/control.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = `
+exports[`renders ./components/popover/demo/hover-with-click.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
   type="button"
@@ -54,7 +54,7 @@ exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
+exports[`renders ./components/popover/demo/placement.tsx correctly 1`] = `
 <div
   class="demo"
 >
@@ -173,7 +173,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/popover/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/popover/demo/render-panel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top"
@@ -245,7 +245,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popover/demo/triggerType.md correctly 1`] = `
+exports[`renders ./components/popover/demo/triggerType.tsx correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-default"
diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
index aa0f5ce281..23b32ef541 100644
--- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/progress/demo/circle.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/circle.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -186,7 +186,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/circle-dynamic.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/circle-dynamic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -298,7 +298,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/circle-mini.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/circle-mini.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -484,7 +484,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/dashboard.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/dashboard.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -587,7 +587,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/dynamic.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/dynamic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -672,7 +672,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/format.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/format.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -775,7 +775,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/gradient-line.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/gradient-line.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -977,7 +977,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/line.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/line.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1120,7 +1120,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/line-mini.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/line-mini.tsx extend context correctly 1`] = `
 <div
   style="width: 170px;"
 >
@@ -1249,7 +1249,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/progress/demo/linecap.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/linecap.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1375,7 +1375,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/segment.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/segment.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1576,7 +1576,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/steps.md extend context correctly 1`] = `
+exports[`renders ./components/progress/demo/steps.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
index 59020527a0..2f20290895 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
+exports[`renders ./components/progress/demo/circle.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -186,7 +186,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
+exports[`renders ./components/progress/demo/circle-dynamic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -298,7 +298,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
+exports[`renders ./components/progress/demo/circle-mini.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -484,7 +484,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
+exports[`renders ./components/progress/demo/dashboard.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -587,7 +587,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
+exports[`renders ./components/progress/demo/dynamic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -672,7 +672,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/format.md correctly 1`] = `
+exports[`renders ./components/progress/demo/format.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -775,7 +775,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
+exports[`renders ./components/progress/demo/gradient-line.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -977,7 +977,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/line.md correctly 1`] = `
+exports[`renders ./components/progress/demo/line.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1120,7 +1120,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
+exports[`renders ./components/progress/demo/line-mini.tsx correctly 1`] = `
 <div
   style="width: 170px;"
 >
@@ -1249,7 +1249,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
+exports[`renders ./components/progress/demo/linecap.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1375,7 +1375,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
+exports[`renders ./components/progress/demo/segment.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1504,7 +1504,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
+exports[`renders ./components/progress/demo/steps.tsx correctly 1`] = `
 Array [
   <div
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2199ead0ab..e77ccd3ff4 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/radio/demo/badge.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/badge.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-solid"
 >
@@ -85,7 +85,7 @@ exports[`renders ./components/radio/demo/badge.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/radio/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/basic.tsx extend context correctly 1`] = `
 <label
   class="ant-radio-wrapper"
 >
@@ -107,7 +107,7 @@ exports[`renders ./components/radio/demo/basic.md extend context correctly 1`] =
 </label>
 `;
 
-exports[`renders ./components/radio/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <label
     class="ant-radio-wrapper ant-radio-wrapper-disabled"
@@ -163,7 +163,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiobutton.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiobutton.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -418,7 +418,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiobutton-solid.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiobutton-solid.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-solid"
@@ -587,7 +587,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiogroup.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -671,7 +671,7 @@ exports[`renders ./components/radio/demo/radiogroup.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-more.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-more.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -778,7 +778,7 @@ exports[`renders ./components/radio/demo/radiogroup-more.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-options.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-options.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -1038,7 +1038,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-with-name.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-with-name.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -1126,7 +1126,7 @@ exports[`renders ./components/radio/demo/radiogroup-with-name.md extend context
 </div>
 `;
 
-exports[`renders ./components/radio/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/radio/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
diff --git a/components/radio/__tests__/__snapshots__/demo.test.ts.snap b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
index 5d5bdce6f2..4d0766a780 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
+exports[`renders ./components/radio/demo/badge.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-solid"
 >
@@ -85,7 +85,7 @@ exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
+exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
 <label
   class="ant-radio-wrapper"
 >
@@ -107,7 +107,7 @@ exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
 </label>
 `;
 
-exports[`renders ./components/radio/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/radio/demo/disabled.tsx correctly 1`] = `
 Array [
   <label
     class="ant-radio-wrapper ant-radio-wrapper-disabled"
@@ -163,7 +163,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiobutton.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiobutton.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -418,7 +418,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiobutton-solid.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-solid"
@@ -587,7 +587,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiogroup.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -671,7 +671,7 @@ exports[`renders ./components/radio/demo/radiogroup.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-more.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -778,7 +778,7 @@ exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-options.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -1038,7 +1038,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/radio/demo/radiogroup-with-name.md correctly 1`] = `
+exports[`renders ./components/radio/demo/radiogroup-with-name.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"
 >
@@ -1126,7 +1126,7 @@ exports[`renders ./components/radio/demo/radiogroup-with-name.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/radio/demo/size.md correctly 1`] = `
+exports[`renders ./components/radio/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
diff --git a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
index e859725bab..21e9f86a5b 100644
--- a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/rate/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/basic.tsx extend context correctly 1`] = `
 <ul
   class="ant-rate"
   role="radiogroup"
@@ -299,7 +299,7 @@ exports[`renders ./components/rate/demo/basic.md extend context correctly 1`] =
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/character.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/character.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -835,7 +835,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/character-function.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/character-function.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -1253,7 +1253,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/clear.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/clear.tsx extend context correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -1861,7 +1861,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/disabled.tsx extend context correctly 1`] = `
 <ul
   class="ant-rate ant-rate-disabled"
   role="radiogroup"
@@ -2160,7 +2160,7 @@ exports[`renders ./components/rate/demo/disabled.md extend context correctly 1`]
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/half.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/half.tsx extend context correctly 1`] = `
 <ul
   class="ant-rate"
   role="radiogroup"
@@ -2459,7 +2459,7 @@ exports[`renders ./components/rate/demo/half.md extend context correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/text.md extend context correctly 1`] = `
+exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] = `
 <span>
   <ul
     class="ant-rate"
diff --git a/components/rate/__tests__/__snapshots__/demo.test.ts.snap b/components/rate/__tests__/__snapshots__/demo.test.ts.snap
index 51f3f5c4a3..5160315341 100644
--- a/components/rate/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/rate/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
+exports[`renders ./components/rate/demo/basic.tsx correctly 1`] = `
 <ul
   class="ant-rate"
   role="radiogroup"
@@ -299,7 +299,7 @@ exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/character.md correctly 1`] = `
+exports[`renders ./components/rate/demo/character.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -835,7 +835,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/character-function.md correctly 1`] = `
+exports[`renders ./components/rate/demo/character-function.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -1253,7 +1253,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
+exports[`renders ./components/rate/demo/clear.tsx correctly 1`] = `
 Array [
   <ul
     class="ant-rate"
@@ -1861,7 +1861,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/rate/demo/disabled.tsx correctly 1`] = `
 <ul
   class="ant-rate ant-rate-disabled"
   role="radiogroup"
@@ -2160,7 +2160,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/half.md correctly 1`] = `
+exports[`renders ./components/rate/demo/half.tsx correctly 1`] = `
 <ul
   class="ant-rate"
   role="radiogroup"
@@ -2459,7 +2459,7 @@ exports[`renders ./components/rate/demo/half.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/rate/demo/text.md correctly 1`] = `
+exports[`renders ./components/rate/demo/text.tsx correctly 1`] = `
 <span>
   <ul
     class="ant-rate"
diff --git a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
index 48ebdd498f..20b487fde7 100644
--- a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/result/demo/403.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/403.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-403"
 >
@@ -313,7 +313,7 @@ exports[`renders ./components/result/demo/403.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/result/demo/404.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/404.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-404"
 >
@@ -644,7 +644,7 @@ exports[`renders ./components/result/demo/404.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/result/demo/500.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/500.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-500"
 >
@@ -1022,7 +1022,7 @@ exports[`renders ./components/result/demo/500.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/result/demo/customIcon.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/customIcon.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-info"
 >
@@ -1069,7 +1069,7 @@ exports[`renders ./components/result/demo/customIcon.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/result/demo/error.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/error.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-error"
 >
@@ -1209,7 +1209,7 @@ exports[`renders ./components/result/demo/error.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/result/demo/info.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/info.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-info"
 >
@@ -1256,7 +1256,7 @@ exports[`renders ./components/result/demo/info.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/result/demo/success.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/success.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-success"
 >
@@ -1316,7 +1316,7 @@ exports[`renders ./components/result/demo/success.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/result/demo/warning.md extend context correctly 1`] = `
+exports[`renders ./components/result/demo/warning.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-warning"
 >
diff --git a/components/result/__tests__/__snapshots__/demo.test.ts.snap b/components/result/__tests__/__snapshots__/demo.test.ts.snap
index 95b8bf2f8a..d2113c4f37 100644
--- a/components/result/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/result/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/result/demo/403.md correctly 1`] = `
+exports[`renders ./components/result/demo/403.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-403"
 >
@@ -313,7 +313,7 @@ exports[`renders ./components/result/demo/403.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/404.md correctly 1`] = `
+exports[`renders ./components/result/demo/404.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-404"
 >
@@ -644,7 +644,7 @@ exports[`renders ./components/result/demo/404.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/500.md correctly 1`] = `
+exports[`renders ./components/result/demo/500.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-500"
 >
@@ -1022,7 +1022,7 @@ exports[`renders ./components/result/demo/500.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/customIcon.md correctly 1`] = `
+exports[`renders ./components/result/demo/customIcon.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-info"
 >
@@ -1069,7 +1069,7 @@ exports[`renders ./components/result/demo/customIcon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/error.md correctly 1`] = `
+exports[`renders ./components/result/demo/error.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-error"
 >
@@ -1209,7 +1209,7 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/info.md correctly 1`] = `
+exports[`renders ./components/result/demo/info.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-info"
 >
@@ -1256,7 +1256,7 @@ exports[`renders ./components/result/demo/info.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/success.md correctly 1`] = `
+exports[`renders ./components/result/demo/success.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-success"
 >
@@ -1316,7 +1316,7 @@ exports[`renders ./components/result/demo/success.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/result/demo/warning.md correctly 1`] = `
+exports[`renders ./components/result/demo/warning.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-warning"
 >
diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
index 48323c692b..345c4272e3 100644
--- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/segmented/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -82,7 +82,7 @@ exports[`renders ./components/segmented/demo/basic.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/block.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/block.tsx extend context correctly 1`] = `
 <div
   class="ant-segmented ant-segmented-block"
 >
@@ -136,7 +136,7 @@ exports[`renders ./components/segmented/demo/block.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/controlled.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/controlled.tsx extend context correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -190,7 +190,7 @@ exports[`renders ./components/segmented/demo/controlled.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/controlled-two.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/controlled-two.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -297,7 +297,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/custom.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -508,7 +508,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-segmented ant-segmented-disabled"
@@ -649,7 +649,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/dynamic.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/dynamic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -714,7 +714,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/icon-only.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/icon-only.tsx extend context correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -796,7 +796,7 @@ exports[`renders ./components/segmented/demo/icon-only.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-segmented ant-segmented-lg"
@@ -1040,7 +1040,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/size-consistent.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/size-consistent.tsx extend context correctly 1`] = `
 Array [
   <div>
     <div
@@ -1340,7 +1340,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/with-icon.md extend context correctly 1`] = `
+exports[`renders ./components/segmented/demo/with-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-segmented"
 >
diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
index ce43fcc050..abff251fff 100644
--- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/segmented/demo/basic.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -82,7 +82,7 @@ exports[`renders ./components/segmented/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/block.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/block.tsx correctly 1`] = `
 <div
   class="ant-segmented ant-segmented-block"
 >
@@ -136,7 +136,7 @@ exports[`renders ./components/segmented/demo/block.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/controlled.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/controlled.tsx correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -190,7 +190,7 @@ exports[`renders ./components/segmented/demo/controlled.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/controlled-two.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/controlled-two.tsx correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -297,7 +297,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/custom.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/custom.tsx correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -508,7 +508,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/disabled.tsx correctly 1`] = `
 Array [
   <div
     class="ant-segmented ant-segmented-disabled"
@@ -649,7 +649,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/dynamic.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/dynamic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-segmented"
@@ -714,7 +714,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/icon-only.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/icon-only.tsx correctly 1`] = `
 <div
   class="ant-segmented"
 >
@@ -796,7 +796,7 @@ exports[`renders ./components/segmented/demo/icon-only.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/segmented/demo/size.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-segmented ant-segmented-lg"
@@ -1040,7 +1040,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/size-consistent.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/size-consistent.tsx correctly 1`] = `
 Array [
   <div>
     <div
@@ -1283,7 +1283,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/segmented/demo/with-icon.md correctly 1`] = `
+exports[`renders ./components/segmented/demo/with-icon.tsx correctly 1`] = `
 <div
   class="ant-segmented"
 >
diff --git a/components/segmented/demo/basic.tsx b/components/segmented/demo/basic.tsx
index f92946451f..d8f27da619 100644
--- a/components/segmented/demo/basic.tsx
+++ b/components/segmented/demo/basic.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 
 export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
diff --git a/components/segmented/demo/block.tsx b/components/segmented/demo/block.tsx
index a41d006f1b..321e8ad4f1 100644
--- a/components/segmented/demo/block.tsx
+++ b/components/segmented/demo/block.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 
 export default () => (
diff --git a/components/segmented/demo/controlled-two.tsx b/components/segmented/demo/controlled-two.tsx
index ba8b3a58cf..3278d3ffd0 100644
--- a/components/segmented/demo/controlled-two.tsx
+++ b/components/segmented/demo/controlled-two.tsx
@@ -1,12 +1,13 @@
 /*
- * debug: true */import { useState } from 'react';
+ * debug: true */
+import React, { useState } from 'react';
 import { Segmented } from 'antd';
 
 const Demo = () => {
-  const [foo, setFoo] = useState('AND');
+  const [foo, setFoo] = useState<string | number>('AND');
   return (
     <>
-      <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />
+      <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={value => setFoo(value)} />
       &nbsp;&nbsp;
       <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={value => setFoo(value)} />
     </>
diff --git a/components/segmented/demo/custom.tsx b/components/segmented/demo/custom.tsx
index e7ae68bb42..b1fbab2f45 100644
--- a/components/segmented/demo/custom.tsx
+++ b/components/segmented/demo/custom.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Avatar, Segmented } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
diff --git a/components/segmented/demo/disabled.tsx b/components/segmented/demo/disabled.tsx
index 2032835d9d..be254bb5ae 100644
--- a/components/segmented/demo/disabled.tsx
+++ b/components/segmented/demo/disabled.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 
 export default () => (
diff --git a/components/segmented/demo/icon-only.tsx b/components/segmented/demo/icon-only.tsx
index 9818b5b972..c08976d92c 100644
--- a/components/segmented/demo/icon-only.tsx
+++ b/components/segmented/demo/icon-only.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
diff --git a/components/segmented/demo/size-consistent.tsx b/components/segmented/demo/size-consistent.tsx
index 924d784786..341023ebed 100644
--- a/components/segmented/demo/size-consistent.tsx
+++ b/components/segmented/demo/size-consistent.tsx
@@ -1,5 +1,7 @@
 /*
- * debug: true */import { Button, Input, Select, Segmented } from 'antd';
+ * debug: true */
+import React from 'react';
+import { Button, Input, Select, Segmented } from 'antd';
 
 export default () => (
   <>
diff --git a/components/segmented/demo/size.tsx b/components/segmented/demo/size.tsx
index f6729d2cc1..c2c0cd9aeb 100644
--- a/components/segmented/demo/size.tsx
+++ b/components/segmented/demo/size.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 
 export default () => (
diff --git a/components/segmented/demo/with-icon.tsx b/components/segmented/demo/with-icon.tsx
index a4ceb94816..29a6b9b5e8 100644
--- a/components/segmented/demo/with-icon.tsx
+++ b/components/segmented/demo/with-icon.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index ff74e26da5..66b80bdc3c 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/select/demo/automatic-tokenization.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/automatic-tokenization.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -381,7 +381,7 @@ exports[`renders ./components/select/demo/automatic-tokenization.md extend conte
 </div>
 `;
 
-exports[`renders ./components/select/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -945,7 +945,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/bordered.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/bordered.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
@@ -1230,7 +1230,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/coordinate.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/coordinate.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -1538,7 +1538,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/custom-dropdown-menu.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/custom-dropdown-menu.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 300px;"
@@ -1741,7 +1741,7 @@ exports[`renders ./components/select/demo/custom-dropdown-menu.md extend context
 </div>
 `;
 
-exports[`renders ./components/select/demo/custom-tag-render.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/custom-tag-render.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -2022,7 +2022,7 @@ exports[`renders ./components/select/demo/custom-tag-render.md extend context co
 </div>
 `;
 
-exports[`renders ./components/select/demo/debug.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`] = `
 <div
   style="width: 500px; position: relative; z-index: 1; border: 1px solid red; background: rgb(255, 255, 255);"
 >
@@ -2452,7 +2452,7 @@ exports[`renders ./components/select/demo/debug.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/select/demo/hide-selected.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/hide-selected.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -2596,7 +2596,7 @@ exports[`renders ./components/select/demo/hide-selected.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/select/demo/label-in-value.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/label-in-value.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 120px;"
@@ -2742,7 +2742,7 @@ exports[`renders ./components/select/demo/label-in-value.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/select/demo/multiple.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/multiple.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
@@ -3748,7 +3748,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/optgroup.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/optgroup.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 200px;"
@@ -3928,7 +3928,7 @@ exports[`renders ./components/select/demo/optgroup.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/select/demo/option-label-prop.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/option-label-prop.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -4172,7 +4172,7 @@ exports[`renders ./components/select/demo/option-label-prop.md extend context co
 </div>
 `;
 
-exports[`renders ./components/select/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -4420,7 +4420,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/responsive.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -5487,7 +5487,7 @@ exports[`renders ./components/select/demo/responsive.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/select/demo/search.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/search.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
 >
@@ -5645,7 +5645,7 @@ exports[`renders ./components/select/demo/search.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/select/demo/search-box.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/search-box.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -5693,7 +5693,7 @@ exports[`renders ./components/select/demo/search-box.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/select/demo/search-sort.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/search-sort.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
   style="width: 200px;"
@@ -5903,7 +5903,7 @@ exports[`renders ./components/select/demo/search-sort.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/select/demo/select-users.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/select-users.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -5969,7 +5969,7 @@ exports[`renders ./components/select/demo/select-users.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/select/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -7611,7 +7611,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -7864,7 +7864,7 @@ exports[`renders ./components/select/demo/status.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/select/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/suffix.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -8166,7 +8166,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/tags.md extend context correctly 1`] = `
+exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
diff --git a/components/select/__tests__/__snapshots__/demo.test.ts.snap b/components/select/__tests__/__snapshots__/demo.test.ts.snap
index f69879fbc2..ac57a57697 100644
--- a/components/select/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`] = `
+exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -47,7 +47,7 @@ exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`
 </div>
 `;
 
-exports[`renders ./components/select/demo/basic.md correctly 1`] = `
+exports[`renders ./components/select/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -324,7 +324,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/big-data.md correctly 1`] = `
+exports[`renders ./components/select/demo/big-data.tsx correctly 1`] = `
 Array [
   <h3
     class="ant-typography"
@@ -454,7 +454,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/bordered.md correctly 1`] = `
+exports[`renders ./components/select/demo/bordered.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
@@ -583,7 +583,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
+exports[`renders ./components/select/demo/coordinate.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -710,7 +710,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`] = `
+exports[`renders ./components/select/demo/custom-dropdown-menu.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 300px;"
@@ -773,7 +773,7 @@ exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/select/demo/custom-tag-render.md correctly 1`] = `
+exports[`renders ./components/select/demo/custom-tag-render.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -912,7 +912,7 @@ exports[`renders ./components/select/demo/custom-tag-render.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/debug.md correctly 1`] = `
+exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
 <div
   style="width: 500px; position: relative; z-index: 1; border: 1px solid red; background: rgb(255, 255, 255);"
 >
@@ -1080,7 +1080,7 @@ exports[`renders ./components/select/demo/debug.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/hide-selected.md correctly 1`] = `
+exports[`renders ./components/select/demo/hide-selected.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -1132,7 +1132,7 @@ exports[`renders ./components/select/demo/hide-selected.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
+exports[`renders ./components/select/demo/label-in-value.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 120px;"
@@ -1196,7 +1196,7 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
+exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
@@ -1430,7 +1430,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
+exports[`renders ./components/select/demo/optgroup.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
   style="width: 200px;"
@@ -1494,7 +1494,7 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
+exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -1582,7 +1582,7 @@ exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/placement.md correctly 1`] = `
+exports[`renders ./components/select/demo/placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -1731,7 +1731,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1870,7 +1870,7 @@ exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/search.md correctly 1`] = `
+exports[`renders ./components/select/demo/search.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
 >
@@ -1929,7 +1929,7 @@ exports[`renders ./components/select/demo/search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
+exports[`renders ./components/select/demo/search-box.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-search"
   style="width: 200px;"
@@ -1963,7 +1963,7 @@ exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/search-sort.md correctly 1`] = `
+exports[`renders ./components/select/demo/search-sort.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
   style="width: 200px;"
@@ -2023,7 +2023,7 @@ exports[`renders ./components/select/demo/search-sort.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
+exports[`renders ./components/select/demo/select-users.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -2075,7 +2075,7 @@ exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/size.md correctly 1`] = `
+exports[`renders ./components/select/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -2455,7 +2455,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/status.md correctly 1`] = `
+exports[`renders ./components/select/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -2588,7 +2588,7 @@ exports[`renders ./components/select/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/select/demo/suffix.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -2717,7 +2717,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/select/demo/tags.md correctly 1`] = `
+exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
diff --git a/components/select/__tests__/demo-extend.test.ts b/components/select/__tests__/demo-extend.test.ts
index 243a931948..770b2233ca 100644
--- a/components/select/__tests__/demo-extend.test.ts
+++ b/components/select/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('select', { skip: ['render-panel.md', 'big-data.md'] });
+extendTest('select', { skip: ['render-panel.tsx', 'big-data.tsx'] });
diff --git a/components/select/__tests__/demo.test.ts b/components/select/__tests__/demo.test.ts
index 910b4ebafd..442e3e5967 100644
--- a/components/select/__tests__/demo.test.ts
+++ b/components/select/__tests__/demo.test.ts
@@ -1,5 +1,5 @@
 import demoTest from '../../../tests/shared/demoTest';
 
 demoTest('select', {
-  skip: ['render-panel.md'],
+  skip: ['render-panel.tsx'],
 });
diff --git a/components/select/__tests__/image.test.ts b/components/select/__tests__/image.test.ts
index 09111e3302..d4e0b04fab 100644
--- a/components/select/__tests__/image.test.ts
+++ b/components/select/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Select image', () => {
-  imageDemoTest('select', { skip: ['basic.md'] });
+  imageDemoTest('select', { skip: ['basic.tsx'] });
 });
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5d36dd90cc..dd61e93ad0 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/skeleton/demo/active.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/active.tsx extend context correctly 1`] = `
 <div
   class="ant-skeleton ant-skeleton-active"
 >
@@ -24,7 +24,7 @@ exports[`renders ./components/skeleton/demo/active.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-skeleton"
 >
@@ -48,7 +48,7 @@ exports[`renders ./components/skeleton/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/children.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/children.tsx extend context correctly 1`] = `
 <div
   class="article"
 >
@@ -71,7 +71,7 @@ exports[`renders ./components/skeleton/demo/children.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/complex.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/complex.tsx extend context correctly 1`] = `
 <div
   class="ant-skeleton ant-skeleton-with-avatar"
 >
@@ -101,7 +101,7 @@ exports[`renders ./components/skeleton/demo/complex.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/element.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/element.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -609,7 +609,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/skeleton/demo/list.md extend context correctly 1`] = `
+exports[`renders ./components/skeleton/demo/list.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="false"
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
index a9691e35e1..c1f7e1cf26 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/skeleton/demo/active.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/active.tsx correctly 1`] = `
 <div
   class="ant-skeleton ant-skeleton-active"
 >
@@ -24,7 +24,7 @@ exports[`renders ./components/skeleton/demo/active.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/basic.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-skeleton"
 >
@@ -48,7 +48,7 @@ exports[`renders ./components/skeleton/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/children.tsx correctly 1`] = `
 <div
   class="article"
 >
@@ -71,7 +71,7 @@ exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/complex.tsx correctly 1`] = `
 <div
   class="ant-skeleton ant-skeleton-with-avatar"
 >
@@ -101,7 +101,7 @@ exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/element.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -609,7 +609,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
+exports[`renders ./components/skeleton/demo/list.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="false"
diff --git a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
index d1c71766c3..a1d0d71181 100644
--- a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/slider/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -155,7 +155,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/dragableTrack.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/dragableTrack.tsx extend context correctly 1`] = `
 <div
   class="ant-slider ant-slider-horizontal"
 >
@@ -240,7 +240,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/slider/demo/event.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/event.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -375,7 +375,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/icon-slider.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/icon-slider.tsx extend context correctly 1`] = `
 <div
   class="icon-wrapper"
 >
@@ -468,7 +468,7 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/slider/demo/input-number.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/input-number.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-row"
@@ -747,7 +747,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/slider/demo/mark.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/mark.tsx extend context correctly 1`] = `
 Array [
   <h4>
     included=true
@@ -1269,7 +1269,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/reverse.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/reverse.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -1424,7 +1424,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/show-tooltip.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/show-tooltip.tsx extend context correctly 1`] = `
 <div
   class="ant-slider ant-slider-horizontal"
 >
@@ -1475,7 +1475,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/slider/demo/tip-formatter.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/tip-formatter.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -1574,7 +1574,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/slider/demo/vertical.tsx extend context correctly 1`] = `
 Array [
   <div
     style="display: inline-block; height: 300px; margin-left: 70px;"
diff --git a/components/slider/__tests__/__snapshots__/demo.test.ts.snap b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
index 6f7aab6c89..ab988e87cf 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
+exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -83,7 +83,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
+exports[`renders ./components/slider/demo/dragableTrack.tsx correctly 1`] = `
 <div
   class="ant-slider ant-slider-horizontal"
 >
@@ -120,7 +120,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/slider/demo/event.md correctly 1`] = `
+exports[`renders ./components/slider/demo/event.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -183,7 +183,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
+exports[`renders ./components/slider/demo/icon-slider.tsx correctly 1`] = `
 <div
   class="icon-wrapper"
 >
@@ -252,7 +252,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
+exports[`renders ./components/slider/demo/input-number.tsx correctly 1`] = `
 <div>
   <div
     class="ant-row"
@@ -483,7 +483,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
+exports[`renders ./components/slider/demo/mark.tsx correctly 1`] = `
 Array [
   <h4>
     included=true
@@ -861,7 +861,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
+exports[`renders ./components/slider/demo/reverse.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -944,61 +944,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
-<div
-  class="ant-slider"
->
-  <div
-    class="ant-slider-rail"
-  />
-  <div
-    class="ant-slider-track"
-    style="left:0%;right:auto;width:30%"
-  />
-  <div
-    class="ant-slider-step"
-  />
-  <div
-    aria-disabled="false"
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="30"
-    class="ant-slider-handle ant-tooltip-open"
-    role="slider"
-    style="left:30%;right:auto;transform:translateX(-50%)"
-    tabindex="0"
-  />
-  <div>
-    <div
-      class="ant-tooltip ant-slider-tooltip"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-arrow"
-        >
-          <span
-            class="ant-tooltip-arrow-content"
-          />
-        </div>
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          30
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-slider-mark"
-  />
-</div>
-`;
-
-exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
+exports[`renders ./components/slider/demo/tip-formatter.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -1051,7 +997,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/slider/demo/vertical.tsx correctly 1`] = `
 Array [
   <div
     style="display: inline-block; height: 300px; margin-left: 70px;"
diff --git a/components/slider/__tests__/demo.test.ts b/components/slider/__tests__/demo.test.ts
index e5379baa52..b5a32ccc97 100644
--- a/components/slider/__tests__/demo.test.ts
+++ b/components/slider/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('slider', { skip: ['show-tooltip.md'] });
+demoTest('slider', { skip: ['show-tooltip.tsx'] });
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 85e878bf14..43b920e84e 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/space/demo/align.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/align.tsx extend context correctly 1`] = `
 <div
   class="space-align-container"
 >
@@ -151,7 +151,7 @@ exports[`renders ./components/space/demo/align.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/space/demo/base.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/base.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -318,7 +318,7 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/space/demo/customize.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/customize.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -428,7 +428,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/debug.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/debug.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -654,7 +654,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/space/demo/gap-in-line.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/gap-in-line.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -720,7 +720,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -844,7 +844,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/split.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/split.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -898,7 +898,7 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/vertical.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="display: flex;"
@@ -1001,7 +1001,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] = `
+exports[`renders ./components/space/demo/wrap.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -16px;"
diff --git a/components/space/__tests__/__snapshots__/demo.test.ts.snap b/components/space/__tests__/__snapshots__/demo.test.ts.snap
index 685f39a528..d98bc0fb53 100644
--- a/components/space/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/space/demo/align.md correctly 1`] = `
+exports[`renders ./components/space/demo/align.tsx correctly 1`] = `
 <div
   class="space-align-container"
 >
@@ -151,7 +151,7 @@ exports[`renders ./components/space/demo/align.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/space/demo/base.md correctly 1`] = `
+exports[`renders ./components/space/demo/base.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -243,7 +243,7 @@ exports[`renders ./components/space/demo/base.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/space/demo/customize.md correctly 1`] = `
+exports[`renders ./components/space/demo/customize.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -329,7 +329,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/debug.md correctly 1`] = `
+exports[`renders ./components/space/demo/debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -405,7 +405,7 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/space/demo/gap-in-line.md correctly 1`] = `
+exports[`renders ./components/space/demo/gap-in-line.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="false"
@@ -471,7 +471,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/size.md correctly 1`] = `
+exports[`renders ./components/space/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -595,7 +595,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/space/demo/split.md correctly 1`] = `
+exports[`renders ./components/space/demo/split.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -649,7 +649,7 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/space/demo/vertical.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="display: flex;"
@@ -752,7 +752,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
+exports[`renders ./components/space/demo/wrap.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -16px;"
diff --git a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
index 14df7074f1..8996283382 100644
--- a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/spin/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/basic.tsx extend context correctly 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
@@ -25,7 +25,7 @@ exports[`renders ./components/spin/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/spin/demo/custom-indicator.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/custom-indicator.tsx extend context correctly 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
@@ -54,7 +54,7 @@ exports[`renders ./components/spin/demo/custom-indicator.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/spin/demo/delayAndDebounce.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/delayAndDebounce.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-spin-nested-loading"
@@ -112,7 +112,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/spin/demo/inside.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/inside.tsx extend context correctly 1`] = `
 <div
   class="example"
 >
@@ -141,7 +141,7 @@ exports[`renders ./components/spin/demo/inside.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/spin/demo/nested.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/nested.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-spin-nested-loading"
@@ -199,7 +199,7 @@ exports[`renders ./components/spin/demo/nested.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/spin/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/size.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -286,7 +286,7 @@ exports[`renders ./components/spin/demo/size.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/tip.md extend context correctly 1`] = `
+exports[`renders ./components/spin/demo/tip.tsx extend context correctly 1`] = `
 <div
   class="ant-spin-nested-loading"
 >
diff --git a/components/spin/__tests__/__snapshots__/demo.test.ts.snap b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
index 903bffef75..c0dc29b4ea 100644
--- a/components/spin/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
+exports[`renders ./components/spin/demo/basic.tsx correctly 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
@@ -25,7 +25,7 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
+exports[`renders ./components/spin/demo/custom-indicator.tsx correctly 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
@@ -54,7 +54,7 @@ exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
+exports[`renders ./components/spin/demo/delayAndDebounce.tsx correctly 1`] = `
 <div>
   <div
     class="ant-spin-nested-loading"
@@ -112,7 +112,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
+exports[`renders ./components/spin/demo/inside.tsx correctly 1`] = `
 <div
   class="example"
 >
@@ -141,7 +141,7 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
+exports[`renders ./components/spin/demo/nested.tsx correctly 1`] = `
 <div>
   <div
     class="ant-spin-nested-loading"
@@ -199,7 +199,7 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/size.md correctly 1`] = `
+exports[`renders ./components/spin/demo/size.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -286,7 +286,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
+exports[`renders ./components/spin/demo/tip.tsx correctly 1`] = `
 <div
   class="ant-spin-nested-loading"
 >
diff --git a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
index 90b01764ec..6514dd5c9c 100644
--- a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/statistic/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/statistic/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
@@ -101,7 +101,7 @@ exports[`renders ./components/statistic/demo/basic.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/card.md extend context correctly 1`] = `
+exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1`] = `
 <div
   class="site-statistic-demo-card"
 >
@@ -251,7 +251,7 @@ exports[`renders ./components/statistic/demo/card.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/countdown.md extend context correctly 1`] = `
+exports[`renders ./components/statistic/demo/countdown.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
@@ -351,7 +351,7 @@ exports[`renders ./components/statistic/demo/countdown.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/unit.md extend context correctly 1`] = `
+exports[`renders ./components/statistic/demo/unit.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
index 528c24f8fa..5ba82bc55f 100644
--- a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
+exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
@@ -101,7 +101,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
+exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
 <div
   class="site-statistic-demo-card"
 >
@@ -251,7 +251,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
+exports[`renders ./components/statistic/demo/countdown.tsx correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
@@ -351,7 +351,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
+exports[`renders ./components/statistic/demo/unit.tsx correctly 1`] = `
 <div
   class="ant-row"
   style="margin-left: -8px; margin-right: -8px;"
diff --git a/components/statistic/__tests__/image.test.ts b/components/statistic/__tests__/image.test.ts
index ebb4c48808..6f4d230dd7 100644
--- a/components/statistic/__tests__/image.test.ts
+++ b/components/statistic/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Statistic image', () => {
-  imageDemoTest('statistic', { skip: ['countdown.md'] });
+  imageDemoTest('statistic', { skip: ['countdown.tsx'] });
 });
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index 435a4656f9..741e1b1bdf 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/steps/demo/clickable.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/clickable.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -233,7 +233,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/customized-progress-dot.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-dot"
 >
@@ -516,7 +516,7 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md extend conte
 </div>
 `;
 
-exports[`renders ./components/steps/demo/error.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/error.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -661,7 +661,7 @@ exports[`renders ./components/steps/demo/error.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/steps/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -856,7 +856,7 @@ exports[`renders ./components/steps/demo/icon.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/steps/demo/label-placement.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/label-placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -1285,7 +1285,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/nav.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/nav.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical site-navigation-steps ant-steps-small ant-steps-navigation"
@@ -1746,7 +1746,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/progress.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-with-progress"
 >
@@ -1929,7 +1929,7 @@ exports[`renders ./components/steps/demo/progress.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/steps/demo/progress-debug.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-debug.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -2710,7 +2710,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress-dot.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-dot.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical ant-steps-dot"
@@ -3015,7 +3015,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress-dot-small.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-dot-small.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical ant-steps-small ant-steps-dot"
@@ -3320,7 +3320,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/simple.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/simple.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -3453,7 +3453,7 @@ exports[`renders ./components/steps/demo/simple.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/steps/demo/small-size.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/small-size.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-small"
 >
@@ -3565,7 +3565,7 @@ exports[`renders ./components/steps/demo/small-size.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/steps/demo/step-next.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/step-next.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -3678,7 +3678,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/steps-in-steps.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/steps-in-steps.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -3946,7 +3946,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/vertical.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/vertical.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -4073,7 +4073,7 @@ exports[`renders ./components/steps/demo/vertical.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/steps/demo/vertical-small.md extend context correctly 1`] = `
+exports[`renders ./components/steps/demo/vertical-small.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-small"
 >
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 27d60b51c4..24526dc271 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/steps/demo/clickable.md correctly 1`] = `
+exports[`renders ./components/steps/demo/clickable.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -233,7 +233,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`] = `
+exports[`renders ./components/steps/demo/customized-progress-dot.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-dot"
 >
@@ -384,7 +384,7 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`
 </div>
 `;
 
-exports[`renders ./components/steps/demo/error.md correctly 1`] = `
+exports[`renders ./components/steps/demo/error.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -529,7 +529,7 @@ exports[`renders ./components/steps/demo/error.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
+exports[`renders ./components/steps/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -724,7 +724,7 @@ exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/label-placement.md correctly 1`] = `
+exports[`renders ./components/steps/demo/label-placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -1153,7 +1153,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
+exports[`renders ./components/steps/demo/nav.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical site-navigation-steps ant-steps-small ant-steps-navigation"
@@ -1614,7 +1614,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
+exports[`renders ./components/steps/demo/progress.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-with-progress"
 >
@@ -1797,7 +1797,7 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/progress-debug.md correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-debug.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -2578,7 +2578,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-dot.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical ant-steps-dot"
@@ -2883,7 +2883,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/progress-dot-small.md correctly 1`] = `
+exports[`renders ./components/steps/demo/progress-dot-small.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical ant-steps-small ant-steps-dot"
@@ -3188,7 +3188,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
+exports[`renders ./components/steps/demo/simple.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -3321,7 +3321,7 @@ exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
+exports[`renders ./components/steps/demo/small-size.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-small"
 >
@@ -3433,7 +3433,7 @@ exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
+exports[`renders ./components/steps/demo/step-next.tsx correctly 1`] = `
 Array [
   <div
     class="ant-steps ant-steps-vertical"
@@ -3546,7 +3546,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/steps-in-steps.md correctly 1`] = `
+exports[`renders ./components/steps/demo/steps-in-steps.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -3814,7 +3814,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/steps/demo/vertical.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
 >
@@ -3941,7 +3941,7 @@ exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/steps/demo/vertical-small.md correctly 1`] = `
+exports[`renders ./components/steps/demo/vertical-small.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-small"
 >
diff --git a/components/steps/__tests__/image.test.ts b/components/steps/__tests__/image.test.ts
index e1a6249b88..5ea854047c 100644
--- a/components/steps/__tests__/image.test.ts
+++ b/components/steps/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Steps image', () => {
-  imageDemoTest('steps', { skip: ['icon.md'] });
+  imageDemoTest('steps', { skip: ['icon.tsx'] });
 });
diff --git a/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap
index 31796f127d..7f43155002 100644
--- a/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/switch/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/switch/demo/basic.tsx extend context correctly 1`] = `
 <button
   aria-checked="true"
   class="ant-switch ant-switch-checked"
@@ -23,7 +23,7 @@ exports[`renders ./components/switch/demo/basic.md extend context correctly 1`]
 </button>
 `;
 
-exports[`renders ./components/switch/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/switch/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -58,7 +58,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/loading.md extend context correctly 1`] = `
+exports[`renders ./components/switch/demo/loading.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -146,7 +146,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/switch/demo/size.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -192,7 +192,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/text.md extend context correctly 1`] = `
+exports[`renders ./components/switch/demo/text.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
diff --git a/components/switch/__tests__/__snapshots__/demo.test.ts.snap b/components/switch/__tests__/__snapshots__/demo.test.ts.snap
index 3280cf7978..a323d4566e 100644
--- a/components/switch/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/switch/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
+exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
 <button
   aria-checked="true"
   class="ant-switch ant-switch-checked"
@@ -23,7 +23,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/switch/demo/disabled.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -58,7 +58,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
+exports[`renders ./components/switch/demo/loading.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -146,7 +146,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/size.md correctly 1`] = `
+exports[`renders ./components/switch/demo/size.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -192,7 +192,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/switch/demo/text.md correctly 1`] = `
+exports[`renders ./components/switch/demo/text.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
diff --git a/components/switch/__tests__/image.test.ts b/components/switch/__tests__/image.test.ts
index 56f6f6c880..27372841dd 100644
--- a/components/switch/__tests__/image.test.ts
+++ b/components/switch/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Switch image', () => {
-  imageDemoTest('switch', { skip: ['loading.md'] });
+  imageDemoTest('switch', { skip: ['loading.tsx'] });
 });
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 68d97870ee..672fbeeccc 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/ajax.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -447,7 +447,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -769,7 +769,7 @@ exports[`renders ./components/table/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/bordered.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/bordered.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -986,7 +986,7 @@ exports[`renders ./components/table/demo/bordered.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/table/demo/colspan-rowspan.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1266,7 +1266,7 @@ exports[`renders ./components/table/demo/colspan-rowspan.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/table/demo/custom-filter-panel.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/custom-filter-panel.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1924,7 +1924,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
 </div>
 `;
 
-exports[`renders ./components/table/demo/drag-sorting.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/drag-sorting.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -2127,7 +2127,7 @@ exports[`renders ./components/table/demo/drag-sorting.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/table/demo/drag-sorting-handler.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/drag-sorting-handler.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -2322,7 +2322,7 @@ exports[`renders ./components/table/demo/drag-sorting-handler.md extend context
 </div>
 `;
 
-exports[`renders ./components/table/demo/dynamic-settings.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/dynamic-settings.tsx extend context correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline components-table-demo-control-bar"
@@ -4924,7 +4924,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/edit-cell.tsx extend context correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-primary"
@@ -5295,7 +5295,7 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/table/demo/edit-row.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/edit-row.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -6016,7 +6016,7 @@ exports[`renders ./components/table/demo/edit-row.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/table/demo/ellipsis.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/ellipsis.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -6302,7 +6302,7 @@ exports[`renders ./components/table/demo/ellipsis.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/table/demo/ellipsis-custom-tooltip.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/ellipsis-custom-tooltip.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -6888,7 +6888,7 @@ exports[`renders ./components/table/demo/ellipsis-custom-tooltip.md extend conte
 </div>
 `;
 
-exports[`renders ./components/table/demo/expand.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/expand.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -7185,7 +7185,7 @@ exports[`renders ./components/table/demo/expand.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/table/demo/filter-in-tree.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/filter-in-tree.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -8187,7 +8187,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/table/demo/filter-search.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/filter-search.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -9013,7 +9013,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-columns.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-columns.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -9436,7 +9436,7 @@ exports[`renders ./components/table/demo/fixed-columns.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-columns-header.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-columns-header.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -10682,7 +10682,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md extend context
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-header.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-header.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -12064,7 +12064,7 @@ exports[`renders ./components/table/demo/fixed-header.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/table/demo/grouping-columns.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -13422,7 +13422,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/table/demo/head.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/head.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -14434,7 +14434,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/jsx.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/jsx.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -14782,7 +14782,7 @@ exports[`renders ./components/table/demo/jsx.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/multiple-sorter.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/multiple-sorter.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -15264,7 +15264,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/table/demo/narrow.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/narrow.tsx extend context correctly 1`] = `
 <div
   style="width: 300px;"
 >
@@ -15933,7 +15933,7 @@ exports[`renders ./components/table/demo/narrow.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/table/demo/nest-table-border-debug.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/nest-table-border-debug.tsx extend context correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline components-table-demo-control-bar"
@@ -16370,7 +16370,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/nested-table.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/nested-table.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-table-wrapper"
@@ -19498,7 +19498,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/order-column.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/order-column.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -19871,7 +19871,7 @@ exports[`renders ./components/table/demo/order-column.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/table/demo/pagination.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/pagination.tsx extend context correctly 1`] = `
 <div>
   <div>
     <div
@@ -20447,7 +20447,7 @@ exports[`renders ./components/table/demo/pagination.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/table/demo/reset-filter.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/reset-filter.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -21411,7 +21411,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/resizable-column.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/resizable-column.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -21759,7 +21759,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
 </div>
 `;
 
-exports[`renders ./components/table/demo/responsive.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/responsive.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -21898,7 +21898,7 @@ exports[`renders ./components/table/demo/responsive.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -22285,7 +22285,7 @@ exports[`renders ./components/table/demo/row-selection.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-and-operation.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-and-operation.tsx extend context correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -22912,7 +22912,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md extend c
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-custom.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-custom.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -23847,7 +23847,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md extend context
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-custom-debug.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-custom-debug.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -24261,7 +24261,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md extend co
 </div>
 `;
 
-exports[`renders ./components/table/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/size.tsx extend context correctly 1`] = `
 <div>
   <h4>
     Middle size table
@@ -24660,7 +24660,7 @@ exports[`renders ./components/table/demo/size.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/sticky.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/sticky.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -25964,7 +25964,7 @@ exports[`renders ./components/table/demo/sticky.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/table/demo/summary.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/summary.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-table-wrapper"
@@ -26584,7 +26584,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/tree-data.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/tree-data.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -26893,7 +26893,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/tree-table-ellipsis.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/tree-table-ellipsis.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -27622,7 +27622,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/virtual-list.md extend context correctly 1`] = `
+exports[`renders ./components/table/demo/virtual-list.tsx extend context correctly 1`] = `
 <div
   class="ant-table-wrapper virtual-table"
 >
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index bcf830a3bf..7882d371bd 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
+exports[`renders ./components/table/demo/ajax.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -231,7 +231,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/basic.md correctly 1`] = `
+exports[`renders ./components/table/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -553,7 +553,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
+exports[`renders ./components/table/demo/bordered.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -770,7 +770,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
+exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1050,7 +1050,7 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] = `
+exports[`renders ./components/table/demo/custom-filter-panel.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1429,7 +1429,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
+exports[`renders ./components/table/demo/drag-sorting.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1632,7 +1632,7 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/drag-sorting-handler.md correctly 1`] = `
+exports[`renders ./components/table/demo/drag-sorting-handler.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -1827,7 +1827,7 @@ exports[`renders ./components/table/demo/drag-sorting-handler.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
+exports[`renders ./components/table/demo/dynamic-settings.tsx correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline components-table-demo-control-bar"
@@ -4189,7 +4189,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
+exports[`renders ./components/table/demo/edit-cell.tsx correctly 1`] = `
 <div>
   <button
     class="ant-btn ant-btn-primary"
@@ -4410,7 +4410,7 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
+exports[`renders ./components/table/demo/edit-row.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -5012,7 +5012,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/ellipsis.md correctly 1`] = `
+exports[`renders ./components/table/demo/ellipsis.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -5298,7 +5298,7 @@ exports[`renders ./components/table/demo/ellipsis.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/ellipsis-custom-tooltip.md correctly 1`] = `
+exports[`renders ./components/table/demo/ellipsis-custom-tooltip.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -5596,7 +5596,7 @@ exports[`renders ./components/table/demo/ellipsis-custom-tooltip.md correctly 1`
 </div>
 `;
 
-exports[`renders ./components/table/demo/expand.md correctly 1`] = `
+exports[`renders ./components/table/demo/expand.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -5893,7 +5893,7 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
+exports[`renders ./components/table/demo/filter-in-tree.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -6240,7 +6240,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
+exports[`renders ./components/table/demo/filter-search.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -6587,7 +6587,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-columns.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -7010,7 +7010,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-columns-header.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -8137,7 +8137,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
+exports[`renders ./components/table/demo/fixed-header.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -9400,7 +9400,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
+exports[`renders ./components/table/demo/grouping-columns.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -10423,7 +10423,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/head.md correctly 1`] = `
+exports[`renders ./components/table/demo/head.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -10799,7 +10799,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
+exports[`renders ./components/table/demo/jsx.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -11147,7 +11147,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
+exports[`renders ./components/table/demo/multiple-sorter.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -11557,7 +11557,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/narrow.md correctly 1`] = `
+exports[`renders ./components/table/demo/narrow.tsx correctly 1`] = `
 <div
   style="width: 300px;"
 >
@@ -12107,7 +12107,7 @@ exports[`renders ./components/table/demo/narrow.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/nest-table-border-debug.md correctly 1`] = `
+exports[`renders ./components/table/demo/nest-table-border-debug.tsx correctly 1`] = `
 Array [
   <form
     class="ant-form ant-form-inline components-table-demo-control-bar"
@@ -12544,7 +12544,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
+exports[`renders ./components/table/demo/nested-table.tsx correctly 1`] = `
 Array [
   <div
     class="ant-table-wrapper"
@@ -14493,7 +14493,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/order-column.md correctly 1`] = `
+exports[`renders ./components/table/demo/order-column.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -14866,7 +14866,7 @@ exports[`renders ./components/table/demo/order-column.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
+exports[`renders ./components/table/demo/pagination.tsx correctly 1`] = `
 <div>
   <div>
     <div
@@ -15442,7 +15442,7 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
+exports[`renders ./components/table/demo/reset-filter.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -15950,7 +15950,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
+exports[`renders ./components/table/demo/resizable-column.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -16274,7 +16274,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/responsive.md correctly 1`] = `
+exports[`renders ./components/table/demo/responsive.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -16413,7 +16413,7 @@ exports[`renders ./components/table/demo/responsive.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection.tsx correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -16800,7 +16800,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-and-operation.md correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-and-operation.tsx correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -17427,7 +17427,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-custom.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -18063,7 +18063,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly 1`] = `
+exports[`renders ./components/table/demo/row-selection-custom-debug.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -18477,7 +18477,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
 </div>
 `;
 
-exports[`renders ./components/table/demo/size.md correctly 1`] = `
+exports[`renders ./components/table/demo/size.tsx correctly 1`] = `
 <div>
   <h4>
     Middle size table
@@ -18876,7 +18876,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/sticky.md correctly 1`] = `
+exports[`renders ./components/table/demo/sticky.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper"
 >
@@ -20061,7 +20061,7 @@ exports[`renders ./components/table/demo/sticky.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/table/demo/summary.md correctly 1`] = `
+exports[`renders ./components/table/demo/summary.tsx correctly 1`] = `
 Array [
   <div
     class="ant-table-wrapper"
@@ -20681,7 +20681,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/tree-data.md correctly 1`] = `
+exports[`renders ./components/table/demo/tree-data.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -20990,7 +20990,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/tree-table-ellipsis.md correctly 1`] = `
+exports[`renders ./components/table/demo/tree-table-ellipsis.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -21719,7 +21719,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/table/demo/virtual-list.md correctly 1`] = `
+exports[`renders ./components/table/demo/virtual-list.tsx correctly 1`] = `
 <div
   class="ant-table-wrapper virtual-table"
 >
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index ed3522111f..101f153a98 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tabs/demo/animated.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/animated.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -202,7 +202,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -340,7 +340,7 @@ exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/card.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
@@ -478,7 +478,7 @@ exports[`renders ./components/tabs/demo/card.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card-top.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/card-top.tsx extend context correctly 1`] = `
 <div
   class="card-container"
 >
@@ -631,7 +631,7 @@ exports[`renders ./components/tabs/demo/card-top.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/centered.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/centered.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
@@ -769,7 +769,7 @@ exports[`renders ./components/tabs/demo/centered.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-add-trigger.tsx extend context correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -959,7 +959,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context cor
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-tab-bar.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-tabs ant-tabs-top"
@@ -1105,7 +1105,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md extend context correct
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1261,7 +1261,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/deprecated.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/deprecated.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1399,7 +1399,7 @@ exports[`renders ./components/tabs/demo/deprecated.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/disabled.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1537,7 +1537,7 @@ exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/editable-card.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/editable-card.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
@@ -1789,7 +1789,7 @@ exports[`renders ./components/tabs/demo/editable-card.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/extra.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/extra.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-tabs ant-tabs-top"
@@ -2156,7 +2156,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -2324,7 +2324,7 @@ exports[`renders ./components/tabs/demo/icon.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/nest.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -3481,7 +3481,7 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/position.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/position.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -3717,7 +3717,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/size.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -4056,7 +4056,7 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] = `
+exports[`renders ./components/tabs/demo/slide.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index d8f43ef53c..d4abd72a27 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tabs/demo/animated.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/animated.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -183,7 +183,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -302,7 +302,7 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/card.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
@@ -421,7 +421,7 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/card-top.tsx correctly 1`] = `
 <div
   class="card-container"
 >
@@ -555,7 +555,7 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/centered.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/centered.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
@@ -674,7 +674,7 @@ exports[`renders ./components/tabs/demo/centered.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -845,7 +845,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
 <div>
   <div
     class="ant-tabs ant-tabs-top"
@@ -972,7 +972,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1109,7 +1109,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/deprecated.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/deprecated.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1228,7 +1228,7 @@ exports[`renders ./components/tabs/demo/deprecated.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/disabled.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -1347,7 +1347,7 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/editable-card.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
@@ -1580,7 +1580,7 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/extra.tsx correctly 1`] = `
 Array [
   <div
     class="ant-tabs ant-tabs-top"
@@ -1909,7 +1909,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
 >
@@ -2058,7 +2058,7 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/nest.tsx correctly 1`] = `
 <div>
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
@@ -2751,7 +2751,7 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/position.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -2968,7 +2968,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/size.tsx correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -3269,7 +3269,7 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
+exports[`renders ./components/tabs/demo/slide.tsx correctly 1`] = `
 <div>
   <div
     class="ant-radio-group ant-radio-group-outline"
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
index e10a76e725..aed8f8f4b9 100644
--- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tag/demo/animation.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/animation.tsx extend context correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 16px;"
@@ -128,7 +128,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-tag"
@@ -197,7 +197,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/checkable.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/checkable.tsx extend context correctly 1`] = `
 Array [
   <span
     style="margin-right: 8px;"
@@ -227,7 +227,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/colorful.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/colorful.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -335,7 +335,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/colorful-inverse.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/colorful-inverse.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -407,7 +407,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/control.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/control.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-tag edit-tag"
@@ -503,7 +503,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/customize.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/customize.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-tag"
@@ -549,7 +549,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/icon.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/icon.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-tag ant-tag-has-color"
@@ -662,7 +662,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/tag/demo/status.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
index 00ec4b9701..f2e11f8ca8 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tag/demo/animation.md correctly 1`] = `
+exports[`renders ./components/tag/demo/animation.tsx correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 16px;"
@@ -128,7 +128,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
+exports[`renders ./components/tag/demo/basic.tsx correctly 1`] = `
 Array [
   <span
     class="ant-tag"
@@ -197,7 +197,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
+exports[`renders ./components/tag/demo/checkable.tsx correctly 1`] = `
 Array [
   <span
     style="margin-right: 8px;"
@@ -227,7 +227,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
+exports[`renders ./components/tag/demo/colorful.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -335,7 +335,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/colorful-inverse.md correctly 1`] = `
+exports[`renders ./components/tag/demo/colorful-inverse.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -407,7 +407,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/control.md correctly 1`] = `
+exports[`renders ./components/tag/demo/control.tsx correctly 1`] = `
 Array [
   <span
     class="ant-tag edit-tag"
@@ -503,7 +503,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/customize.md correctly 1`] = `
+exports[`renders ./components/tag/demo/customize.tsx correctly 1`] = `
 Array [
   <span
     class="ant-tag"
@@ -549,7 +549,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
+exports[`renders ./components/tag/demo/icon.tsx correctly 1`] = `
 Array [
   <span
     class="ant-tag ant-tag-has-color"
@@ -662,7 +662,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tag/demo/status.md correctly 1`] = `
+exports[`renders ./components/tag/demo/status.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
diff --git a/components/tag/__tests__/image.test.ts b/components/tag/__tests__/image.test.ts
index d042353c1f..0e3e6abd4d 100644
--- a/components/tag/__tests__/image.test.ts
+++ b/components/tag/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Tag image', () => {
-  imageDemoTest('tag', { skip: ['status.md'] });
+  imageDemoTest('tag', { skip: ['status.tsx'] });
 });
diff --git a/components/time-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/time-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8f28a83cf6..d05a93ebd0 100644
--- a/components/time-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/time-picker/demo/12hours.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/12hours.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -3427,7 +3427,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/addon.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/addon.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -4851,7 +4851,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -6262,7 +6262,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/bordered.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/bordered.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-borderless"
@@ -9128,7 +9128,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/colored-popup.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/colored-popup.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -10539,7 +10539,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/disabled.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-disabled"
@@ -11951,7 +11951,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/hide-column.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/hide-column.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -12841,7 +12841,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/interval-options.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/interval-options.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -13263,7 +13263,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/range-picker.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/range-picker.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-range"
@@ -14722,7 +14722,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -16140,7 +16140,7 @@ exports[`renders ./components/time-picker/demo/render-panel.md extend context co
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/size.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-large"
@@ -20435,7 +20435,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -26183,7 +26183,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/suffix.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -27591,7 +27591,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/value.md extend context correctly 1`] = `
+exports[`renders ./components/time-picker/demo/value.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-picker"
diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.ts.snap b/components/time-picker/__tests__/__snapshots__/demo.test.ts.snap
index e70363a4d1..c87f082ae7 100644
--- a/components/time-picker/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/12hours.tsx correctly 1`] = `
 Array [
   <div
     class="ant-picker"
@@ -132,7 +132,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/addon.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -177,7 +177,7 @@ exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -222,7 +222,7 @@ exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/bordered.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/bordered.tsx correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-borderless"
@@ -353,7 +353,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/colored-popup.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/colored-popup.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -398,7 +398,7 @@ exports[`renders ./components/time-picker/demo/colored-popup.md correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/disabled.tsx correctly 1`] = `
 <div
   class="ant-picker ant-picker-disabled"
 >
@@ -444,7 +444,7 @@ exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/hide-column.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -513,7 +513,7 @@ exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/interval-options.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/interval-options.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -558,7 +558,7 @@ exports[`renders ./components/time-picker/demo/interval-options.md correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/range-picker.tsx correctly 1`] = `
 <div
   class="ant-picker ant-picker-range"
 >
@@ -645,7 +645,7 @@ exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -2063,7 +2063,7 @@ exports[`renders ./components/time-picker/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-picker ant-picker-large"
@@ -2266,7 +2266,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/time-picker/demo/status.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2544,7 +2544,7 @@ exports[`renders ./components/time-picker/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/suffix.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
@@ -2586,7 +2586,7 @@ exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/time-picker/demo/value.md correctly 1`] = `
+exports[`renders ./components/time-picker/demo/value.tsx correctly 1`] = `
 <div
   class="ant-picker"
 >
diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4cfb9ee0d5..ffa97c4822 100644
--- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/timeline/demo/alternate.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/alternate.tsx extend context correctly 1`] = `
 <ul
   class="ant-timeline ant-timeline-alternate"
 >
@@ -145,7 +145,7 @@ exports[`renders ./components/timeline/demo/alternate.md extend context correctl
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/basic.tsx extend context correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -212,7 +212,7 @@ exports[`renders ./components/timeline/demo/basic.md extend context correctly 1`
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/color.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/color.tsx extend context correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -379,7 +379,7 @@ exports[`renders ./components/timeline/demo/color.md extend context correctly 1`
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/custom.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/custom.tsx extend context correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -469,7 +469,7 @@ exports[`renders ./components/timeline/demo/custom.md extend context correctly 1
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/label.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/label.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -616,7 +616,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/timeline/demo/pending.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/pending.tsx extend context correctly 1`] = `
 <div>
   <ul
     class="ant-timeline ant-timeline-pending"
@@ -714,7 +714,7 @@ exports[`renders ./components/timeline/demo/pending.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/timeline/demo/right.md extend context correctly 1`] = `
+exports[`renders ./components/timeline/demo/right.tsx extend context correctly 1`] = `
 <ul
   class="ant-timeline ant-timeline-right"
 >
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
index c858feab64..870d32638b 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/alternate.tsx correctly 1`] = `
 <ul
   class="ant-timeline ant-timeline-alternate"
 >
@@ -145,7 +145,7 @@ exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/basic.tsx correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -212,7 +212,7 @@ exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/color.tsx correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -379,7 +379,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/custom.tsx correctly 1`] = `
 <ul
   class="ant-timeline"
 >
@@ -469,7 +469,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 </ul>
 `;
 
-exports[`renders ./components/timeline/demo/label.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/label.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -616,7 +616,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/pending.tsx correctly 1`] = `
 <div>
   <ul
     class="ant-timeline ant-timeline-pending"
@@ -714,7 +714,7 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
+exports[`renders ./components/timeline/demo/right.tsx correctly 1`] = `
 <ul
   class="ant-timeline ant-timeline-right"
 >
diff --git a/components/timeline/__tests__/image.test.ts b/components/timeline/__tests__/image.test.ts
index bb41590e0b..ea03fa6c19 100644
--- a/components/timeline/__tests__/image.test.ts
+++ b/components/timeline/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Timeline image', () => {
-  imageDemoTest('timeline', { skip: ['pending.md'] });
+  imageDemoTest('timeline', { skip: ['pending.tsx'] });
 });
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index e25bcb0cc9..21590811d1 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tooltip/demo/arrow-point-at-center.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/arrow-point-at-center.tsx extend context correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -69,7 +69,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/auto-adjust-overflow.tsx extend context correctly 1`] = `
 <div
   style="overflow: hidden; position: relative; padding: 24px; border: 1px solid #e9e9e9;"
 >
@@ -147,7 +147,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md extend contex
 </div>
 `;
 
-exports[`renders ./components/tooltip/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <span>
     Tooltip will show on mouse enter.
@@ -179,7 +179,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/colorful.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/colorful.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -756,7 +756,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 1`] = `
 Array [
   <span>
     Tooltip will destroy when hidden.
@@ -788,7 +788,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/placement.tsx extend context correctly 1`] = `
 <div
   class="demo"
 >
@@ -1219,7 +1219,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/tooltip/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/tooltip/demo/render-panel.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-tooltip ant-tooltip-pure ant-tooltip-placement-top ant-tooltip-pink"
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo.test.ts.snap
index 37f9e28d61..38e32094ba 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/arrow-point-at-center.tsx correctly 1`] = `
 Array [
   <button
     class="ant-btn ant-btn-default"
@@ -21,7 +21,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/auto-adjust-overflow.tsx correctly 1`] = `
 <div
   style="overflow: hidden; position: relative; padding: 24px; border: 1px solid #e9e9e9;"
 >
@@ -45,13 +45,13 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/basic.tsx correctly 1`] = `
 <span>
   Tooltip will show on mouse enter.
 </span>
 `;
 
-exports[`renders ./components/tooltip/demo/colorful.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/colorful.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -216,13 +216,13 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.tsx correctly 1`] = `
 <span>
   Tooltip will destroy when hidden.
 </span>
 `;
 
-exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/placement.tsx correctly 1`] = `
 <div
   class="demo"
 >
@@ -341,7 +341,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tooltip/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/tooltip/demo/render-panel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-tooltip ant-tooltip-pure ant-tooltip-placement-top ant-tooltip-pink"
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index c87080123b..09d2ebf3aa 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -7,7 +7,8 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
 import { getTransitionName } from '../_util/motion';
-import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
+import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
+import getPlacements from '../_util/placements';
 import { cloneElement, isValidElement, isFragment } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 import warning from '../_util/warning';
diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
index a7cf4622f5..0042231976 100644
--- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/transfer/demo/advanced.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/advanced.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -1129,7 +1129,7 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -2096,7 +2096,7 @@ exports[`renders ./components/transfer/demo/basic.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/custom-item.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/custom-item.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -3181,7 +3181,7 @@ exports[`renders ./components/transfer/demo/custom-item.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/custom-select-all-labels.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -3882,7 +3882,7 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md extend c
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/large-data.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/large-data.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-transfer"
@@ -5118,7 +5118,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/oneWay.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/oneWay.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-transfer"
@@ -6088,7 +6088,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/search.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/search.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -7183,7 +7183,7 @@ exports[`renders ./components/transfer/demo/search.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -8391,7 +8391,7 @@ exports[`renders ./components/transfer/demo/status.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/table-transfer.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/table-transfer.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-transfer ant-transfer-customize-list"
@@ -9835,7 +9835,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/tree-transfer.md extend context correctly 1`] = `
+exports[`renders ./components/transfer/demo/tree-transfer.tsx extend context correctly 1`] = `
 <div
   class="ant-transfer ant-transfer-customize-list tree-transfer"
 >
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
index 1487ecb5f4..3deaf09a92 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/advanced.tsx correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -867,7 +867,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -1572,7 +1572,7 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/custom-item.tsx correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -2395,7 +2395,7 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/custom-select-all-labels.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/custom-select-all-labels.tsx correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -2834,7 +2834,7 @@ exports[`renders ./components/transfer/demo/custom-select-all-labels.md correctl
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/large-data.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/large-data.tsx correctly 1`] = `
 Array [
   <div
     class="ant-transfer"
@@ -3696,7 +3696,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/oneWay.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/oneWay.tsx correctly 1`] = `
 Array [
   <div
     class="ant-transfer"
@@ -4460,7 +4460,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/search.tsx correctly 1`] = `
 <div
   class="ant-transfer"
 >
@@ -5293,7 +5293,7 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/status.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -5977,7 +5977,7 @@ exports[`renders ./components/transfer/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/table-transfer.tsx correctly 1`] = `
 Array [
   <div
     class="ant-transfer ant-transfer-customize-list"
@@ -7159,7 +7159,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
+exports[`renders ./components/transfer/demo/tree-transfer.tsx correctly 1`] = `
 <div
   class="ant-transfer ant-transfer-customize-list tree-transfer"
 >
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8134ca5fe5..73c77ce5e7 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree-select/demo/async.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/async.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
   style="width: 100%;"
@@ -225,7 +225,7 @@ exports[`renders ./components/tree-select/demo/async.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -569,7 +569,7 @@ exports[`renders ./components/tree-select/demo/basic.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/checkable.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/checkable.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -810,7 +810,7 @@ exports[`renders ./components/tree-select/demo/checkable.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/multiple.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/multiple.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
   style="width: 100%;"
@@ -1146,7 +1146,7 @@ exports[`renders ./components/tree-select/demo/multiple.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/placement.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/placement.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -1574,7 +1574,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tree-select/demo/render-panel.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/render-panel.tsx extend context correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -1765,7 +1765,7 @@ exports[`renders ./components/tree-select/demo/render-panel.md extend context co
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/status.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -2007,7 +2007,7 @@ exports[`renders ./components/tree-select/demo/status.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/suffix.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -2351,7 +2351,7 @@ exports[`renders ./components/tree-select/demo/suffix.md extend context correctl
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/treeData.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/treeData.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
   style="width: 100%;"
@@ -2587,7 +2587,7 @@ exports[`renders ./components/tree-select/demo/treeData.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/treeLine.md extend context correctly 1`] = `
+exports[`renders ./components/tree-select/demo/treeLine.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo.test.ts.snap
index a9524e73c2..95167ae6ad 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree-select/demo/async.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/async.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
   style="width: 100%;"
@@ -62,7 +62,7 @@ exports[`renders ./components/tree-select/demo/async.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -121,7 +121,7 @@ exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/checkable.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
   style="width: 100%;"
@@ -208,7 +208,7 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/multiple.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
   style="width: 100%;"
@@ -259,7 +259,7 @@ exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/placement.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/placement.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
@@ -402,7 +402,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tree-select/demo/render-panel.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/render-panel.tsx correctly 1`] = `
 <div
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
@@ -593,7 +593,7 @@ exports[`renders ./components/tree-select/demo/render-panel.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/status.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -717,7 +717,7 @@ exports[`renders ./components/tree-select/demo/status.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/suffix.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width: 100%;"
@@ -776,7 +776,7 @@ exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/treeData.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
   style="width: 100%;"
@@ -838,7 +838,7 @@ exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/treeLine.md correctly 1`] = `
+exports[`renders ./components/tree-select/demo/treeLine.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4682733100..7a959409a4 100644
--- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -318,7 +318,7 @@ exports[`renders ./components/tree/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/tree/demo/basic-controlled.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/basic-controlled.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -857,7 +857,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md extend context corre
 </div>
 `;
 
-exports[`renders ./components/tree/demo/customized-icon.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/customized-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tree"
   role="tree"
@@ -1068,7 +1068,7 @@ exports[`renders ./components/tree/demo/customized-icon.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/tree/demo/directory.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/directory.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
   role="tree"
@@ -1445,7 +1445,7 @@ exports[`renders ./components/tree/demo/directory.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/tree/demo/drag-debug.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/drag-debug.tsx extend context correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 16px;"
@@ -2329,7 +2329,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tree/demo/draggable.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/draggable.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node draggable-tree"
   role="tree"
@@ -2901,7 +2901,7 @@ exports[`renders ./components/tree/demo/draggable.md extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/tree/demo/dynamic.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/dynamic.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -3055,7 +3055,7 @@ exports[`renders ./components/tree/demo/dynamic.md extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/tree/demo/line.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/line.tsx extend context correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -3709,7 +3709,7 @@ exports[`renders ./components/tree/demo/line.md extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/search.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/search.tsx extend context correctly 1`] = `
 <div>
   <span
     class="ant-input-group-wrapper ant-input-search"
@@ -3923,7 +3923,7 @@ exports[`renders ./components/tree/demo/search.md extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/tree/demo/switcher-icon.md extend context correctly 1`] = `
+exports[`renders ./components/tree/demo/switcher-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-show-line"
   role="tree"
diff --git a/components/tree/__tests__/__snapshots__/demo.test.ts.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
index a6f325459f..08d8c111ee 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
+exports[`renders ./components/tree/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -318,7 +318,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
+exports[`renders ./components/tree/demo/basic-controlled.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -857,7 +857,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
+exports[`renders ./components/tree/demo/customized-icon.tsx correctly 1`] = `
 <div
   class="ant-tree"
   role="tree"
@@ -1068,7 +1068,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
+exports[`renders ./components/tree/demo/directory.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
   role="tree"
@@ -1445,7 +1445,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/drag-debug.md correctly 1`] = `
+exports[`renders ./components/tree/demo/drag-debug.tsx correctly 1`] = `
 Array [
   <div
     style="margin-bottom: 16px;"
@@ -2329,7 +2329,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
+exports[`renders ./components/tree/demo/draggable.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node draggable-tree"
   role="tree"
@@ -2901,7 +2901,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
+exports[`renders ./components/tree/demo/dynamic.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
   role="tree"
@@ -3055,7 +3055,7 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/line.md correctly 1`] = `
+exports[`renders ./components/tree/demo/line.tsx correctly 1`] = `
 <div>
   <div
     style="margin-bottom: 16px;"
@@ -3610,7 +3610,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/search.md correctly 1`] = `
+exports[`renders ./components/tree/demo/search.tsx correctly 1`] = `
 <div>
   <span
     class="ant-input-group-wrapper ant-input-search"
@@ -3824,7 +3824,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
+exports[`renders ./components/tree/demo/switcher-icon.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-show-line"
   role="tree"
diff --git a/components/tree/__tests__/demo-extend.test.ts b/components/tree/__tests__/demo-extend.test.ts
index 81d06aa5d8..7003968a23 100644
--- a/components/tree/__tests__/demo-extend.test.ts
+++ b/components/tree/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('tree', { skip: ['big-data.md', 'virtual-scroll.md'] });
+extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] });
diff --git a/components/tree/__tests__/demo.test.ts b/components/tree/__tests__/demo.test.ts
index 103e772b0e..6a3aa1be48 100644
--- a/components/tree/__tests__/demo.test.ts
+++ b/components/tree/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('tree', { skip: ['big-data.md', 'virtual-scroll.md'] });
+demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] });
diff --git a/components/tree/__tests__/image.test.ts b/components/tree/__tests__/image.test.ts
index 46a790c604..b7437b9c3a 100644
--- a/components/tree/__tests__/image.test.ts
+++ b/components/tree/__tests__/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Tree image', () => {
-  imageDemoTest('tree', { skip: ['virtual-scroll.md', 'big-data.md'] });
+  imageDemoTest('tree', { skip: ['virtual-scroll.tsx', 'big-data.tsx'] });
 });
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index 213fe69500..28c8449154 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/typography/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/basic.tsx extend context correctly 1`] = `
 <article
   class="ant-typography"
 >
@@ -215,7 +215,7 @@ exports[`renders ./components/typography/demo/basic.md extend context correctly
 </article>
 `;
 
-exports[`renders ./components/typography/demo/ellipsis.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -303,7 +303,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/ellipsis-debug.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis-debug.tsx extend context correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -623,7 +623,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/ellipsis-middle.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis-middle.tsx extend context correctly 1`] = `
 <span
   aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of"
   class="ant-typography ant-typography-ellipsis ant-typography-single-line"
@@ -651,7 +651,7 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md extend context
 </span>
 `;
 
-exports[`renders ./components/typography/demo/interactive.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/interactive.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-typography"
@@ -1619,7 +1619,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/paragraph-debug.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/paragraph-debug.tsx extend context correctly 1`] = `
 Array [
   <h1
     class="ant-typography"
@@ -1820,7 +1820,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/suffix.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/suffix.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -1904,7 +1904,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/text.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/text.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -2067,7 +2067,7 @@ exports[`renders ./components/typography/demo/text.md extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/typography/demo/title.md extend context correctly 1`] = `
+exports[`renders ./components/typography/demo/title.tsx extend context correctly 1`] = `
 Array [
   <h1
     class="ant-typography"
diff --git a/components/typography/__tests__/__snapshots__/demo.test.ts.snap b/components/typography/__tests__/__snapshots__/demo.test.ts.snap
index 0a5e74da5f..9f6fbf5c80 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
+exports[`renders ./components/typography/demo/basic.tsx correctly 1`] = `
 <article
   class="ant-typography"
 >
@@ -215,7 +215,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
 </article>
 `;
 
-exports[`renders ./components/typography/demo/ellipsis.md correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -279,7 +279,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis-debug.tsx correctly 1`] = `
 Array [
   <button
     aria-checked="true"
@@ -503,7 +503,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/ellipsis-middle.md correctly 1`] = `
+exports[`renders ./components/typography/demo/ellipsis-middle.tsx correctly 1`] = `
 <span
   aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of"
   class="ant-typography ant-typography-ellipsis ant-typography-single-line"
@@ -531,7 +531,7 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md correctly 1`] =
 </span>
 `;
 
-exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
+exports[`renders ./components/typography/demo/interactive.tsx correctly 1`] = `
 Array [
   <div
     class="ant-typography"
@@ -1119,7 +1119,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] = `
+exports[`renders ./components/typography/demo/paragraph-debug.tsx correctly 1`] = `
 Array [
   <h1
     class="ant-typography"
@@ -1320,7 +1320,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/suffix.md correctly 1`] = `
+exports[`renders ./components/typography/demo/suffix.tsx correctly 1`] = `
 Array [
   <div
     class="ant-slider ant-slider-horizontal"
@@ -1380,7 +1380,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/typography/demo/text.md correctly 1`] = `
+exports[`renders ./components/typography/demo/text.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -1543,7 +1543,7 @@ exports[`renders ./components/typography/demo/text.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/typography/demo/title.md correctly 1`] = `
+exports[`renders ./components/typography/demo/title.tsx correctly 1`] = `
 Array [
   <h1
     class="ant-typography"
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 86bd179e65..8bc4b6f64c 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/upload/demo/avatar.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/avatar.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
 >
@@ -54,7 +54,7 @@ exports[`renders ./components/upload/demo/avatar.md extend context correctly 1`]
 </span>
 `;
 
-exports[`renders ./components/upload/demo/basic.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/basic.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -106,7 +106,7 @@ exports[`renders ./components/upload/demo/basic.md extend context correctly 1`]
 </span>
 `;
 
-exports[`renders ./components/upload/demo/crop-image.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/crop-image.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -218,7 +218,7 @@ exports[`renders ./components/upload/demo/crop-image.md extend context correctly
 </span>
 `;
 
-exports[`renders ./components/upload/demo/customize-progress-bar.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/customize-progress-bar.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -270,7 +270,7 @@ exports[`renders ./components/upload/demo/customize-progress-bar.md extend conte
 </span>
 `;
 
-exports[`renders ./components/upload/demo/defaultFileList.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/defaultFileList.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -560,7 +560,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md extend context corr
 </span>
 `;
 
-exports[`renders ./components/upload/demo/directory.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/directory.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -614,7 +614,7 @@ exports[`renders ./components/upload/demo/directory.md extend context correctly
 </span>
 `;
 
-exports[`renders ./components/upload/demo/drag.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/drag.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -677,7 +677,7 @@ exports[`renders ./components/upload/demo/drag.md extend context correctly 1`] =
 </span>
 `;
 
-exports[`renders ./components/upload/demo/drag-sorting.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/drag-sorting.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -1131,7 +1131,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md extend context correct
 </span>
 `;
 
-exports[`renders ./components/upload/demo/file-type.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/file-type.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -1816,7 +1816,7 @@ exports[`renders ./components/upload/demo/file-type.md extend context correctly
 </span>
 `;
 
-exports[`renders ./components/upload/demo/fileList.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/fileList.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -1940,7 +1940,7 @@ exports[`renders ./components/upload/demo/fileList.md extend context correctly 1
 </span>
 `;
 
-exports[`renders ./components/upload/demo/max-count.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/max-count.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -2056,7 +2056,7 @@ exports[`renders ./components/upload/demo/max-count.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/upload/demo/picture-card.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/picture-card.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -2613,7 +2613,7 @@ exports[`renders ./components/upload/demo/picture-card.md extend context correct
 </span>
 `;
 
-exports[`renders ./components/upload/demo/picture-style.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/picture-style.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-upload-wrapper"
@@ -3194,7 +3194,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/upload/demo/preview-file.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/preview-file.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3246,7 +3246,7 @@ exports[`renders ./components/upload/demo/preview-file.md extend context correct
 </span>
 `;
 
-exports[`renders ./components/upload/demo/transform-file.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/transform-file.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3298,7 +3298,7 @@ exports[`renders ./components/upload/demo/transform-file.md extend context corre
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-custom-action-icon.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-custom-action-icon.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3606,7 +3606,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md extend co
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-manually.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-manually.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-upload-wrapper"
@@ -3670,7 +3670,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/upload/demo/upload-png-only.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-png-only.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3722,7 +3722,7 @@ exports[`renders ./components/upload/demo/upload-png-only.md extend context corr
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend context correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-with-aliyun-oss.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
diff --git a/components/upload/__tests__/__snapshots__/demo.test.ts.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
index a6aaaa31d4..f719495caa 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `
+exports[`renders ./components/upload/demo/avatar.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
 >
@@ -54,7 +54,7 @@ exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
+exports[`renders ./components/upload/demo/basic.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -106,7 +106,7 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
+exports[`renders ./components/upload/demo/crop-image.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -218,7 +218,7 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/customize-progress-bar.md correctly 1`] = `
+exports[`renders ./components/upload/demo/customize-progress-bar.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -270,7 +270,7 @@ exports[`renders ./components/upload/demo/customize-progress-bar.md correctly 1`
 </span>
 `;
 
-exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
+exports[`renders ./components/upload/demo/defaultFileList.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -533,7 +533,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/directory.md correctly 1`] = `
+exports[`renders ./components/upload/demo/directory.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -587,7 +587,7 @@ exports[`renders ./components/upload/demo/directory.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/drag.md correctly 1`] = `
+exports[`renders ./components/upload/demo/drag.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -650,7 +650,7 @@ exports[`renders ./components/upload/demo/drag.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
+exports[`renders ./components/upload/demo/drag-sorting.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -1080,7 +1080,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
+exports[`renders ./components/upload/demo/file-type.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -1684,7 +1684,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
+exports[`renders ./components/upload/demo/fileList.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -1808,7 +1808,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/max-count.md correctly 1`] = `
+exports[`renders ./components/upload/demo/max-count.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width: 100%;"
@@ -1924,7 +1924,7 @@ exports[`renders ./components/upload/demo/max-count.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
+exports[`renders ./components/upload/demo/picture-card.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper ant-upload-picture-card-wrapper"
 >
@@ -2454,7 +2454,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
+exports[`renders ./components/upload/demo/picture-style.tsx correctly 1`] = `
 Array [
   <span
     class="ant-upload-wrapper"
@@ -2981,7 +2981,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/upload/demo/preview-file.md correctly 1`] = `
+exports[`renders ./components/upload/demo/preview-file.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3033,7 +3033,7 @@ exports[`renders ./components/upload/demo/preview-file.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/transform-file.md correctly 1`] = `
+exports[`renders ./components/upload/demo/transform-file.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3085,7 +3085,7 @@ exports[`renders ./components/upload/demo/transform-file.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-custom-action-icon.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3366,7 +3366,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-manually.md correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-manually.tsx correctly 1`] = `
 Array [
   <span
     class="ant-upload-wrapper"
@@ -3430,7 +3430,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/upload/demo/upload-png-only.md correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-png-only.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
 >
@@ -3482,7 +3482,7 @@ exports[`renders ./components/upload/demo/upload-png-only.md correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`] = `
+exports[`renders ./components/upload/demo/upload-with-aliyun-oss.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
diff --git a/package.json b/package.json
index 36ffb86c79..1bc3de2a54 100644
--- a/package.json
+++ b/package.json
@@ -80,12 +80,12 @@
     "pub": "npm run version && npm run collect-token-statistic && antd-tools run pub-experimental",
     "prepublishOnly": "antd-tools run guard",
     "postpublish": "node ./scripts/post-script.js",
-    "site": "cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 bisheng build --ssr -c ./site/bisheng.config.js",
-    "site-tmp": "cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 bisheng build --ssr -c ./site/bisheng.config.js",
+    "site:bisheng": "cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 bisheng build --ssr -c ./site/bisheng.config.js",
+    "site": "dumi build && cp .surgeignore _site",
     "sort": "npx sort-package-json",
     "sort-api": "antd-tools run sort-api-table",
-    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"bisheng start -c ./site/bisheng.config.js\"",
-    "start:dumi": "npm run version && dumi dev",
+    "start:bisheng": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"bisheng start -c ./site/bisheng.config.js\"",
+    "start": "npm run version && dumi dev",
     "test": "jest --config .jest.js --cache=false",
     "test:update": "jest --config .jest.js --cache=false -u",
     "test-all": "sh -e ./scripts/test-all.sh",
@@ -159,7 +159,7 @@
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^3.3.0-alpha.4",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^15.1.2",
+    "@ant-design/tools": "^15.1.6",
     "@docsearch/css": "^3.0.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.10.4",
diff --git a/tests/shared/demoTest.tsx b/tests/shared/demoTest.tsx
index bebe3c4474..b35c0cd4e0 100644
--- a/tests/shared/demoTest.tsx
+++ b/tests/shared/demoTest.tsx
@@ -46,7 +46,9 @@ export type Options = {
 };
 
 function baseText(doInject: boolean, component: string, options: Options = {}) {
-  const files = glob.sync(`./components/${component}/demo/*.md`);
+  const files = glob.sync(`./components/${component}/demo/*.tsx`);
+
+  let cssinjsTest = false;
 
   files.forEach(file => {
     let testMethod = options.skip === true ? test.skip : test;
@@ -54,8 +56,9 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
       testMethod = test.skip;
     }
 
-    if (!doInject) {
-      testMethod(`cssinjs should not warn in ${file}`, () => {
+    if (!doInject && !cssinjsTest && testMethod !== test.skip) {
+      cssinjsTest = true;
+      testMethod(`cssinjs should not warn in ${component}`, () => {
         const errSpy = excludeWarning();
 
         let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index 56b623bc57..3172e6622a 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -66,7 +66,7 @@ type Options = {
 // eslint-disable-next-line jest/no-export
 export function imageDemoTest(component: string, options: Options = {}) {
   let testMethod = options.skip === true ? describe.skip : describe;
-  const files = glob.sync(`./components/${component}/demo/*.md`);
+  const files = glob.sync(`./components/${component}/demo/*.tsx`);
 
   files.forEach(file => {
     if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {