demo: update demo (#40313)

* demo: update demo * add * fix lint
2024-12-02 03:59:01 +08:00 · 2023-01-18 19:20:40 +08:00 · 2023-01-18 19:20:40 +08:00 · d549964493
commit d549964493
parent ba38ef6804
29 changed files with 5427 additions and 5284 deletions
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@ -5,10 +5,3 @@
 ## en-US

 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
-
-<style>
-.code-box-demo p {
-  margin: 0;
-}
-#components-card-demo-basic .ant-card { margin-bottom: 30px; }
-</style>
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
--- a/components/select/tests/snapshots/demo.test.ts.snap
+++ b/components/select/tests/snapshots/demo.test.ts.snap
--- a/components/select/demo/basic.tsx
+++ b/components/select/demo/basic.tsx
@ -1,70 +1,42 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';

 const handleChange = (value: string) => {
  console.log(`selected ${value}`);
 };

 const App: React.FC = () => (
-  <>
+  <Space wrap>
    <Select
      defaultValue="lucy"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'disabled', label: 'Disabled', disabled: true },
      ]}
    />
    <Select
      defaultValue="lucy"
      style={{ width: 120 }}
      disabled
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
    />
    <Select
      defaultValue="lucy"
      style={{ width: 120 }}
      loading
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
    />
    <Select
      defaultValue="lucy"
      style={{ width: 120 }}
      allowClear
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
    />
-  </>
+  </Space>
 );

 export default App;
--- a/components/select/demo/big-data.tsx
+++ b/components/select/demo/big-data.tsx
@ -5,6 +5,7 @@ import { Divider, Select, Typography } from 'antd';
 const { Title } = Typography;

 const options: SelectProps['options'] = [];
+
 for (let i = 0; i < 100000; i++) {
  const value = `${i.toString(36)}${i}`;
  options.push({
--- a/components/select/demo/coordinate.tsx
+++ b/components/select/demo/coordinate.tsx
@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';

 const provinceData = ['Zhejiang', 'Jiangsu'];
+
 const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
@ -23,7 +24,7 @@ const App: React.FC = () => {
  };

  return (
-    <>
+    <Space wrap>
      <Select
        defaultValue={provinceData[0]}
        style={{ width: 120 }}
@ -36,7 +37,7 @@ const App: React.FC = () => {
        onChange={onSecondCityChange}
        options={cities.map((city) => ({ label: city, value: city }))}
      />
-    </>
+    </Space>
  );
 };

--- a/components/select/demo/debug.md
+++ b/components/select/demo/debug.md
@ -1,28 +1,7 @@
 ## zh-CN

-基本使用。
+调试使用。

 ## en-US

-Basic Usage.
-
-<style>
-#components-select-demo-debug .debug-align {
-  position: relative;
-  display: inline-block;
-  line-height: 32px;
-  height: 32px;
-  background: rgba(255, 0, 0, 0.1);
-  box-sizing: border-box;
-}
-#components-select-demo-debug .debug-align:after {
-  position: absolute;
-  content: '';
-  border: 1px solid green;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-</style>
+Debug Usage.
--- a/components/select/demo/debug.tsx
+++ b/components/select/demo/debug.tsx
@ -1,20 +1,20 @@
 import React from 'react';
-import { Button, Input, Select } from 'antd';
+import { Button, Input, Select, Space } from 'antd';
+
+const style: React.CSSProperties = {
+  width: 500,
+  position: 'relative',
+  zIndex: 1,
+  border: '1px solid red',
+  backgroundColor: '#fff',
+};

 const handleChange = (value: string | string[]) => {
  console.log(`selected ${value}`);
 };

 const App: React.FC = () => (
-  <div
-    style={{
-      width: 500,
-      position: 'relative',
-      zIndex: 1,
-      border: '1px solid red',
-      background: '#FFF',
-    }}
-  >
+  <Space style={style} wrap>
    <Input style={{ width: 100 }} value="222" />
    <Select
      style={{ width: 120 }}
@ -22,27 +22,11 @@ const App: React.FC = () => (
      showSearch
      placeholder="233"
      options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
-        {
-          value: 'long',
-          label: 'I am super super long!',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'disabled', disabled: true, label: 'Disabled' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'long', label: 'I am super super long!' },
      ]}
    />
    <Select
@ -53,32 +37,16 @@ const App: React.FC = () => (
      showSearch
      placeholder="233"
      options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
-        {
-          value: 'long',
-          label: 'I am super super long!',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'disabled', disabled: true, label: 'Disabled' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'long', label: 'I am super super long!' },
      ]}
    />
    <span className="debug-align">AntDesign</span>
    <Button>222</Button>
-  </div>
+  </Space>
 );

 export default App;
--- a/components/select/demo/multiple.tsx
+++ b/components/select/demo/multiple.tsx
@ -1,8 +1,9 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';

 const options: SelectProps['options'] = [];
+
 for (let i = 10; i < 36; i++) {
  options.push({
    label: i.toString(36) + i,
@ -15,7 +16,7 @@ const handleChange = (value: string[]) => {
 };

 const App: React.FC = () => (
-  <>
+  <Space style={{ width: '100%' }} direction="vertical">
    <Select
      mode="multiple"
      allowClear
@ -25,7 +26,6 @@ const App: React.FC = () => (
      onChange={handleChange}
      options={options}
    />
-    <br />
    <Select
      mode="multiple"
      disabled
@ -35,7 +35,7 @@ const App: React.FC = () => (
      onChange={handleChange}
      options={options}
    />
-  </>
+  </Space>
 );

 export default App;
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@ -5,9 +5,3 @@
 ## en-US

 Specify the prop name of Option which will be rendered in select box.
-
-```css
-.demo-option-label-item > span {
-  margin-right: 6px;
-}
-```
--- a/components/select/demo/option-label-prop.tsx
+++ b/components/select/demo/option-label-prop.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';

 const { Option } = Select;

@ -17,36 +17,36 @@ const App: React.FC = () => (
    optionLabelProp="label"
  >
    <Option value="china" label="China">
-      <div className="demo-option-label-item">
+      <Space>
        <span role="img" aria-label="China">
          🇨🇳
        </span>
        China (中国)
-      </div>
+      </Space>
    </Option>
    <Option value="usa" label="USA">
-      <div className="demo-option-label-item">
+      <Space>
        <span role="img" aria-label="USA">
          🇺🇸
        </span>
        USA (美国)
-      </div>
+      </Space>
    </Option>
    <Option value="japan" label="Japan">
-      <div className="demo-option-label-item">
+      <Space>
        <span role="img" aria-label="Japan">
          🇯🇵
        </span>
        Japan (日本)
-      </div>
+      </Space>
    </Option>
    <Option value="korea" label="Korea">
-      <div className="demo-option-label-item">
+      <Space>
        <span role="img" aria-label="Korea">
          🇰🇷
        </span>
        Korea (韩国)
-      </div>
+      </Space>
    </Option>
  </Select>
 );
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@ -5,17 +5,3 @@
 ## en-US

 The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
-
-```css
-.code-box-demo .ant-select {
-  margin: 0 8px 10px 0;
-}
-
-.ant-row-rtl .code-box-demo .ant-select {
-  margin: 0 0 10px 8px;
-}
-
-#components-select-demo-search-box .code-box-demo .ant-select {
-  margin: 0;
-}
-```
--- a/components/select/demo/size.tsx
+++ b/components/select/demo/size.tsx
@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { Radio, Select } from 'antd';
+import { Radio, Select, Space } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
 import type { SelectProps, RadioChangeEvent } from 'antd';

 const options: SelectProps['options'] = [];
+
 for (let i = 10; i < 36; i++) {
  options.push({
    value: i.toString(36) + i,
@ -31,33 +32,33 @@ const App: React.FC = () => {
      </Radio.Group>
      <br />
      <br />
-      <Select
-        size={size}
-        defaultValue="a1"
-        onChange={handleChange}
-        style={{ width: 200 }}
-        options={options}
-      />
-      <br />
-      <Select
-        mode="multiple"
-        size={size}
-        placeholder="Please select"
-        defaultValue={['a10', 'c12']}
-        onChange={handleChange}
-        style={{ width: '100%' }}
-        options={options}
-      />
-      <br />
-      <Select
-        mode="tags"
-        size={size}
-        placeholder="Please select"
-        defaultValue={['a10', 'c12']}
-        onChange={handleChange}
-        style={{ width: '100%' }}
-        options={options}
-      />
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Select
+          size={size}
+          defaultValue="a1"
+          onChange={handleChange}
+          style={{ width: 200 }}
+          options={options}
+        />
+        <Select
+          mode="multiple"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+        <Select
+          mode="tags"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+      </Space>
    </>
  );
 };
--- a/components/select/demo/status.md
+++ b/components/select/demo/status.md
@ -5,9 +5,3 @@
 ## en-US

 Add status to Select with `status`, which could be `error` or `warning`.
-
-```css
-#components-select-demo-status .ant-select {
-  margin: 0;
-}
-```
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@ -1,7 +1,7 @@
 ## zh-CN

-基本使用。
+后缀图标。

 ## en-US

-Basic Usage.
+suffix icon.
--- a/components/select/demo/suffix.tsx
+++ b/components/select/demo/suffix.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { MehOutlined, SmileOutlined } from '@ant-design/icons';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';

 const smileIcon = <SmileOutlined />;
 const mehIcon = <MehOutlined />;
@ -10,30 +10,17 @@ const handleChange = (value: string) => {
 };

 const App: React.FC = () => (
-  <>
+  <Space wrap>
    <Select
      suffixIcon={smileIcon}
      defaultValue="lucy"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          label: 'Disabled',
-          disabled: true,
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'disabled', label: 'Disabled', disabled: true },
      ]}
    />
    <Select
@ -41,14 +28,9 @@ const App: React.FC = () => (
      defaultValue="lucy"
      style={{ width: 120 }}
      disabled
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
    />
-  </>
+  </Space>
 );

 export default App;
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -44,7 +44,7 @@ Select component to select value from options.

 ## API

-```jsx
+```tsx
 <Select>
  <Option value="lucy">lucy</Option>
 </Select>
@ -149,7 +149,7 @@ You can control it by `open` prop: [codesandbox](https://codesandbox.io/s/ji-ben

 Select will close when it lose focus. You can prevent event to handle this:

-```jsx
+```tsx
 <Select
  dropdownRender={() => (
    <div
@ -168,7 +168,7 @@ Select will close when it lose focus. You can prevent event to handle this:

 Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:

-```jsx
+```tsx
 <Select listItemHeight={10} listHeight={250} />
 ```

--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -45,7 +45,7 @@ demo:

 ## API

-```jsx
+```tsx
 <Select>
  <Option value="lucy">lucy</Option>
 </Select>
@ -150,7 +150,7 @@ demo:

 Select 当失去焦点时会关闭下拉框，如果你可以通过阻止默认行为避免丢失焦点导致的关闭：

-```jsx
+```tsx
 <Select
  dropdownRender={() => (
    <div
--- a/components/slider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/slider/tests/snapshots/demo-extend.test.ts.snap
@ -470,277 +470,289 @@ exports[`renders ./components/slider/demo/icon-slider.tsx extend context correct
 `;

 exports[`renders ./components/slider/demo/input-number.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
  <div
-    class="ant-row"
+    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
-      class="ant-col ant-col-12"
+      class="ant-row"
    >
      <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
      >
        <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="20"
-          aria-valuemin="1"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div>
+          class="ant-slider ant-slider-horizontal"
+        >
          <div
-            class="ant-tooltip ant-slider-tooltip"
-            style="opacity:0"
-          >
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="20"
+            aria-valuemin="1"
+            aria-valuenow="1"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+          <div>
            <div
-              class="ant-tooltip-content"
+              class="ant-tooltip ant-slider-tooltip"
+              style="opacity:0"
            >
              <div
-                class="ant-tooltip-arrow"
+                class="ant-tooltip-content"
              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                1
+                <div
+                  class="ant-tooltip-arrow"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  1
+                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
      <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
      >
        <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
        >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
          >
            <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
            >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
              >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
            </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
            <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
            >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
              >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
            </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="20"
-            aria-valuemin="1"
-            aria-valuenow="1"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="1"
-            value="1"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="20"
+              aria-valuemin="1"
+              aria-valuenow="1"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="1"
+              value="1"
+            />
+          </div>
        </div>
      </div>
    </div>
  </div>
  <div
-    class="ant-row"
+    class="ant-space-item"
  >
    <div
-      class="ant-col ant-col-12"
+      class="ant-row"
    >
      <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
      >
        <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="1"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div>
+          class="ant-slider ant-slider-horizontal"
+        >
          <div
-            class="ant-tooltip ant-slider-tooltip"
-            style="opacity:0"
-          >
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="1"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+          <div>
            <div
-              class="ant-tooltip-content"
+              class="ant-tooltip ant-slider-tooltip"
+              style="opacity:0"
            >
              <div
-                class="ant-tooltip-arrow"
+                class="ant-tooltip-content"
              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                0
+                <div
+                  class="ant-tooltip-arrow"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  0
+                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
      <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
      >
        <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
        >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
          >
            <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
            >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
              >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
            </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
            <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
            >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
              >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
            </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="1"
-            aria-valuemin="0"
-            aria-valuenow="0"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="0.01"
-            value="0.00"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="1"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="0.01"
+              value="0.00"
+            />
+          </div>
        </div>
      </div>
    </div>
--- a/components/slider/tests/snapshots/demo.test.ts.snap
+++ b/components/slider/tests/snapshots/demo.test.ts.snap
@ -254,231 +254,243 @@ exports[`renders ./components/slider/demo/icon-slider.tsx correctly 1`] = `
 `;

 exports[`renders ./components/slider/demo/input-number.tsx correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
  <div
-    class="ant-row"
+    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
-      class="ant-col ant-col-12"
+      class="ant-row"
    >
      <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
      >
        <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="20"
-          aria-valuemin="1"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
-      <div
-        class="ant-input-number"
-        style="margin:0 16px"
-      >
-        <div
-          class="ant-input-number-handler-wrap"
+          class="ant-slider ant-slider-horizontal"
        >
-          <span
+          <div
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
-          >
-            <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
-            <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
            aria-valuemax="20"
            aria-valuemin="1"
            aria-valuenow="1"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="1"
-            value="1"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
          />
        </div>
      </div>
+      <div
+        class="ant-col ant-col-4"
+      >
+        <div
+          class="ant-input-number"
+          style="margin:0 16px"
+        >
+          <div
+            class="ant-input-number-handler-wrap"
+          >
+            <span
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
+            >
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="20"
+              aria-valuemin="1"
+              aria-valuenow="1"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="1"
+              value="1"
+            />
+          </div>
+        </div>
+      </div>
    </div>
  </div>
  <div
-    class="ant-row"
+    class="ant-space-item"
  >
    <div
-      class="ant-col ant-col-12"
+      class="ant-row"
    >
      <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
      >
        <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="1"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
-      <div
-        class="ant-input-number"
-        style="margin:0 16px"
-      >
-        <div
-          class="ant-input-number-handler-wrap"
+          class="ant-slider ant-slider-horizontal"
        >
-          <span
+          <div
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
-          >
-            <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
-            <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
            aria-valuemax="1"
            aria-valuemin="0"
            aria-valuenow="0"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="0.01"
-            value="0.00"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
          />
        </div>
      </div>
+      <div
+        class="ant-col ant-col-4"
+      >
+        <div
+          class="ant-input-number"
+          style="margin:0 16px"
+        >
+          <div
+            class="ant-input-number-handler-wrap"
+          >
+            <span
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
+            >
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="1"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="0.01"
+              value="0.00"
+            />
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </div>
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@ -5,9 +5,3 @@
 ## en-US

 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
-
-<style>
-.code-box-demo .ant-slider {
-  margin-bottom: 16px;
-}
-</style>
--- a/components/slider/demo/input-number.tsx
+++ b/components/slider/demo/input-number.tsx
@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Col, InputNumber, Row, Slider } from 'antd';
+import { Col, InputNumber, Row, Slider, Space } from 'antd';

-const IntegerStep = () => {
+const IntegerStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(1);

  const onChange = (newValue: number) => {
@ -31,14 +31,13 @@ const IntegerStep = () => {
  );
 };

-const DecimalStep = () => {
+const DecimalStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(0);

  const onChange = (value: number) => {
    if (isNaN(value)) {
      return;
    }
-
    setInputValue(value);
  };

@ -68,10 +67,10 @@ const DecimalStep = () => {
 };

 const App: React.FC = () => (
-  <div>
+  <Space style={{ width: '100%' }} direction="vertical">
    <IntegerStep />
    <DecimalStep />
-  </div>
+  </Space>
 );

 export default App;
--- a/components/slider/demo/vertical.tsx
+++ b/components/slider/demo/vertical.tsx
@ -13,9 +13,7 @@ const marks: SliderMarks = {
  26: '26°C',
  37: '37°C',
  100: {
-    style: {
-      color: '#f50',
-    },
+    style: { color: '#f50' },
    label: <strong>100°C</strong>,
  },
 };
--- a/components/switch/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/switch/tests/snapshots/demo-extend.test.ts.snap
@ -24,38 +24,48 @@ exports[`renders ./components/switch/demo/basic.tsx extend context correctly 1`]
 `;

 exports[`renders ./components/switch/demo/disabled.tsx extend context correctly 1`] = `
-Array [
-  <button
-    aria-checked="true"
-    class="ant-switch ant-switch-checked ant-switch-disabled"
-    disabled=""
-    role="switch"
-    type="button"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
  >
-    <div
-      class="ant-switch-handle"
-    />
-    <span
-      class="ant-switch-inner"
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
    >
-      <span
-        class="ant-switch-inner-checked"
+      <div
+        class="ant-switch-handle"
      />
      <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
  >
-    <span>
-      Toggle disabled
-    </span>
-  </button>,
-]
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Toggle disabled
+      </span>
+    </button>
+  </div>
+</div>
 `;

 exports[`renders ./components/switch/demo/loading.tsx extend context correctly 1`] = `
--- a/components/switch/tests/snapshots/demo.test.ts.snap
+++ b/components/switch/tests/snapshots/demo.test.ts.snap
@ -24,38 +24,48 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
 `;

 exports[`renders ./components/switch/demo/disabled.tsx correctly 1`] = `
-Array [
-  <button
-    aria-checked="true"
-    class="ant-switch ant-switch-checked ant-switch-disabled"
-    disabled=""
-    role="switch"
-    type="button"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
  >
-    <div
-      class="ant-switch-handle"
-    />
-    <span
-      class="ant-switch-inner"
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
    >
-      <span
-        class="ant-switch-inner-checked"
+      <div
+        class="ant-switch-handle"
      />
      <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
  >
-    <span>
-      Toggle disabled
-    </span>
-  </button>,
-]
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Toggle disabled
+      </span>
+    </button>
+  </div>
+</div>
 `;

 exports[`renders ./components/switch/demo/loading.tsx correctly 1`] = `
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@ -5,9 +5,3 @@
 ## en-US

 The most basic usage.
-
-<style>
-.code-box-demo .ant-switch {
-  margin-bottom: 8px;
-}
-</style>
--- a/components/switch/demo/disabled.tsx
+++ b/components/switch/demo/disabled.tsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Switch } from 'antd';
+import { Button, Space, Switch } from 'antd';

 const App: React.FC = () => {
  const [disabled, setDisabled] = useState(true);
@ -9,13 +9,12 @@ const App: React.FC = () => {
  };

  return (
-    <>
+    <Space direction="vertical">
      <Switch disabled={disabled} defaultChecked />
-      <br />
      <Button type="primary" onClick={toggle}>
        Toggle disabled
      </Button>
-    </>
+    </Space>
  );
 };

--- a/docs/react/introduce.en-US.md
+++ b/docs/react/introduce.en-US.md
@ -83,6 +83,7 @@ We provide `antd.js` and `antd.min.js` `reset.css` under [dist](https://unpkg.co
 ## Usage

 ```jsx
+import React from 'react';
 import { DatePicker } from 'antd';

 const App = () => {
--- a/docs/react/introduce.zh-CN.md
+++ b/docs/react/introduce.zh-CN.md
@ -83,6 +83,7 @@ $ yarn add antd
 ## 示例

 ```jsx
+import React from 'react';
 import { DatePicker } from 'antd';

 const App = () => {