diff --git a/components/descriptions/Cell.tsx b/components/descriptions/Cell.tsx
index 53cd71fa72..928f43aeaa 100644
--- a/components/descriptions/Cell.tsx
+++ b/components/descriptions/Cell.tsx
@@ -47,7 +47,8 @@ const Cell: React.FC<CellProps> = ({
         style={style}
         colSpan={span}
       >
-        {notEmpty(label) ? label : content}
+        {notEmpty(label) && <span style={labelStyle}>{label}</span>}
+        {notEmpty(content) && <span style={contentStyle}>{content}</span>}
       </Component>
     );
   }
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
index 1545113e7a..9eeac44342 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -152,37 +152,49 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Product
+            <span>
+              Product
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            Cloud Database
+            <span>
+              Cloud Database
+            </span>
           </td>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Billing Mode
+            <span>
+              Billing Mode
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            Prepaid
+            <span>
+              Prepaid
+            </span>
           </td>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Automatic Renewal
+            <span>
+              Automatic Renewal
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            YES
+            <span>
+              YES
+            </span>
           </td>
         </tr>
         <tr
@@ -192,25 +204,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Order time
+            <span>
+              Order time
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            2018-04-24 18:00:00
+            <span>
+              2018-04-24 18:00:00
+            </span>
           </td>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Usage Time
+            <span>
+              Usage Time
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="3"
           >
-            2019-04-24 18:00:00
+            <span>
+              2019-04-24 18:00:00
+            </span>
           </td>
         </tr>
         <tr
@@ -220,22 +240,26 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Status
+            <span>
+              Status
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="5"
           >
-            <span
-              class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
-            >
+            <span>
               <span
-                class="ant-badge-status-dot ant-badge-status-processing"
-              />
-              <span
-                class="ant-badge-status-text"
+                class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
               >
-                Running
+                <span
+                  class="ant-badge-status-dot ant-badge-status-processing"
+                />
+                <span
+                  class="ant-badge-status-text"
+                >
+                  Running
+                </span>
               </span>
             </span>
           </td>
@@ -247,37 +271,49 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Negotiated Amount
+            <span>
+              Negotiated Amount
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $80.00
+            <span>
+              $80.00
+            </span>
           </td>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Discount
+            <span>
+              Discount
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $20.00
+            <span>
+              $20.00
+            </span>
           </td>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Official Receipts
+            <span>
+              Official Receipts
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $60.00
+            <span>
+              $60.00
+            </span>
           </td>
         </tr>
         <tr
@@ -287,24 +323,28 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Config Info
+            <span>
+              Config Info
+            </span>
           </th>
           <td
             class="ant-descriptions-item-content"
             colspan="5"
           >
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1
-            <br />
+            <span>
+              Data disk type: MongoDB
+              <br />
+              Database version: 3.4
+              <br />
+              Package: dds.mongo.mid
+              <br />
+              Storage space: 10 GB
+              <br />
+              Replication factor: 3
+              <br />
+              Region: East China 1
+              <br />
+            </span>
           </td>
         </tr>
       </tbody>
@@ -339,37 +379,49 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Product
+              <span>
+                Product
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              Cloud Database
+              <span>
+                Cloud Database
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Billing
+              <span>
+                Billing
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              Prepaid
+              <span>
+                Prepaid
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              time
+              <span>
+                time
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              18:00:00
+              <span>
+                18:00:00
+              </span>
             </td>
           </tr>
           <tr
@@ -379,37 +431,49 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Amount
+              <span>
+                Amount
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $80.00
+              <span>
+                $80.00
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Discount
+              <span>
+                Discount
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $20.00
+              <span>
+                $20.00
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Official
+              <span>
+                Official
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $60.00
+              <span>
+                $60.00
+              </span>
             </td>
           </tr>
           <tr
@@ -419,23 +483,27 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Config Info
+              <span>
+                Config Info
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="5"
             >
-              Data disk type: MongoDB
-              <br />
-              Database version: 3.4
-              <br />
-              Package: dds.mongo.mid
-              <br />
-              Storage space: 10 GB
-              <br />
-              Replication factor: 3
-              <br />
-              Region: East China 1
+              <span>
+                Data disk type: MongoDB
+                <br />
+                Database version: 3.4
+                <br />
+                Package: dds.mongo.mid
+                <br />
+                Storage space: 10 GB
+                <br />
+                Replication factor: 3
+                <br />
+                Region: East China 1
+              </span>
             </td>
           </tr>
         </tbody>
@@ -547,37 +615,49 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Product
+              <span>
+                Product
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              Cloud Database
+              <span>
+                Cloud Database
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Billing
+              <span>
+                Billing
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              Prepaid
+              <span>
+                Prepaid
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              time
+              <span>
+                time
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              18:00:00
+              <span>
+                18:00:00
+              </span>
             </td>
           </tr>
           <tr
@@ -587,37 +667,49 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Amount
+              <span>
+                Amount
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $80.00
+              <span>
+                $80.00
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Discount
+              <span>
+                Discount
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $20.00
+              <span>
+                $20.00
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Official
+              <span>
+                Official
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              $60.00
+              <span>
+                $60.00
+              </span>
             </td>
           </tr>
           <tr
@@ -627,24 +719,28 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Config Info
+              <span>
+                Config Info
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="5"
             >
-              Data disk type: MongoDB
-              <br />
-              Database version: 3.4
-              <br />
-              Package: dds.mongo.mid
-              <br />
-              Storage space: 10 GB
-              <br />
-              Replication factor: 3
-              <br />
-              Region: East China 1
-              <br />
+              <span>
+                Data disk type: MongoDB
+                <br />
+                Database version: 3.4
+                <br />
+                Package: dds.mongo.mid
+                <br />
+                Storage space: 10 GB
+                <br />
+                Replication factor: 3
+                <br />
+                Region: East China 1
+                <br />
+              </span>
             </td>
           </tr>
         </tbody>
@@ -813,90 +909,72 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
 
 exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
 Array [
-  <div
-    class="ant-descriptions"
+  <button
+    aria-checked="true"
+    class="ant-switch ant-switch-checked"
+    role="switch"
+    type="button"
   >
     <div
-      class="ant-descriptions-header"
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
     >
-      <div
-        class="ant-descriptions-title"
+      Border
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
       >
-        User Info
-      </div>
-    </div>
-    <div
-      class="ant-descriptions-view"
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="horizontal"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        horizontal
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
     >
-      <table>
-        <tbody>
-          <tr
-            class="ant-descriptions-row"
-          >
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                  style="background:red"
-                >
-                  Product
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                  style="background:green"
-                >
-                  Cloud Database
-                </span>
-              </div>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                >
-                  Billing Mode
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                >
-                  Prepaid
-                </span>
-              </div>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                >
-                  Automatic Renewal
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                >
-                  YES
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="vertical"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        vertical
+      </span>
+    </label>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
   <div
     class="ant-descriptions ant-descriptions-bordered"
   >
@@ -922,38 +1000,50 @@ Array [
               colspan="1"
               style="background:red"
             >
-              Product
+              <span>
+                Product
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
               style="background:green"
             >
-              Cloud Database
+              <span>
+                Cloud Database
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Billing Mode
+              <span>
+                Billing Mode
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              Prepaid
+              <span>
+                Prepaid
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
             >
-              Automatic Renewal
+              <span>
+                Automatic Renewal
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
-              YES
+              <span>
+                YES
+              </span>
             </td>
           </tr>
         </tbody>
@@ -964,94 +1054,6 @@ Array [
     class="ant-divider ant-divider-horizontal"
     role="separator"
   />,
-  <div
-    class="ant-descriptions"
-  >
-    <div
-      class="ant-descriptions-header"
-    >
-      <div
-        class="ant-descriptions-title"
-      >
-        Root style
-      </div>
-    </div>
-    <div
-      class="ant-descriptions-view"
-    >
-      <table>
-        <tbody>
-          <tr
-            class="ant-descriptions-row"
-          >
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                  style="background:red"
-                >
-                  Product
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                  style="background:green"
-                >
-                  Cloud Database
-                </span>
-              </div>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                  style="background:red"
-                >
-                  Billing Mode
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                  style="background:green"
-                >
-                  Prepaid
-                </span>
-              </div>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <div
-                class="ant-descriptions-item-container"
-              >
-                <span
-                  class="ant-descriptions-item-label"
-                  style="background:red;color:orange"
-                >
-                  Automatic Renewal
-                </span>
-                <span
-                  class="ant-descriptions-item-content"
-                  style="background:green;color:blue"
-                >
-                  YES
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>,
   <div
     class="ant-descriptions ant-descriptions-bordered"
   >
@@ -1077,42 +1079,54 @@ Array [
               colspan="1"
               style="background:red"
             >
-              Product
+              <span>
+                Product
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
               style="background:green"
             >
-              Cloud Database
+              <span>
+                Cloud Database
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
               style="background:red"
             >
-              Billing Mode
+              <span>
+                Billing Mode
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
               style="background:green"
             >
-              Prepaid
+              <span>
+                Prepaid
+              </span>
             </td>
             <th
               class="ant-descriptions-item-label"
               colspan="1"
               style="background:red;color:orange"
             >
-              Automatic Renewal
+              <span>
+                Automatic Renewal
+              </span>
             </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
               style="background:green;color:blue"
             >
-              YES
+              <span>
+                YES
+              </span>
             </td>
           </tr>
         </tbody>
@@ -1726,19 +1740,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Product
+            <span>
+              Product
+            </span>
           </th>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Billing Mode
+            <span>
+              Billing Mode
+            </span>
           </th>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Automatic Renewal
+            <span>
+              Automatic Renewal
+            </span>
           </th>
         </tr>
         <tr
@@ -1748,19 +1768,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            Cloud Database
+            <span>
+              Cloud Database
+            </span>
           </td>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            Prepaid
+            <span>
+              Prepaid
+            </span>
           </td>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            YES
+            <span>
+              YES
+            </span>
           </td>
         </tr>
         <tr
@@ -1770,13 +1796,17 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Order time
+            <span>
+              Order time
+            </span>
           </th>
           <th
             class="ant-descriptions-item-label"
             colspan="2"
           >
-            Usage Time
+            <span>
+              Usage Time
+            </span>
           </th>
         </tr>
         <tr
@@ -1786,13 +1816,17 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            2018-04-24 18:00:00
+            <span>
+              2018-04-24 18:00:00
+            </span>
           </td>
           <td
             class="ant-descriptions-item-content"
             colspan="2"
           >
-            2019-04-24 18:00:00
+            <span>
+              2019-04-24 18:00:00
+            </span>
           </td>
         </tr>
         <tr
@@ -1802,7 +1836,9 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-label"
             colspan="3"
           >
-            Status
+            <span>
+              Status
+            </span>
           </th>
         </tr>
         <tr
@@ -1812,16 +1848,18 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-content"
             colspan="3"
           >
-            <span
-              class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
-            >
+            <span>
               <span
-                class="ant-badge-status-dot ant-badge-status-processing"
-              />
-              <span
-                class="ant-badge-status-text"
+                class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
               >
-                Running
+                <span
+                  class="ant-badge-status-dot ant-badge-status-processing"
+                />
+                <span
+                  class="ant-badge-status-text"
+                >
+                  Running
+                </span>
               </span>
             </span>
           </td>
@@ -1833,19 +1871,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Negotiated Amount
+            <span>
+              Negotiated Amount
+            </span>
           </th>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Discount
+            <span>
+              Discount
+            </span>
           </th>
           <th
             class="ant-descriptions-item-label"
             colspan="1"
           >
-            Official Receipts
+            <span>
+              Official Receipts
+            </span>
           </th>
         </tr>
         <tr
@@ -1855,19 +1899,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $80.00
+            <span>
+              $80.00
+            </span>
           </td>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $20.00
+            <span>
+              $20.00
+            </span>
           </td>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
-            $60.00
+            <span>
+              $60.00
+            </span>
           </td>
         </tr>
         <tr
@@ -1877,7 +1927,9 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-label"
             colspan="3"
           >
-            Config Info
+            <span>
+              Config Info
+            </span>
           </th>
         </tr>
         <tr
@@ -1887,18 +1939,20 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
             class="ant-descriptions-item-content"
             colspan="3"
           >
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1
-            <br />
+            <span>
+              Data disk type: MongoDB
+              <br />
+              Database version: 3.4
+              <br />
+              Package: dds.mongo.mid
+              <br />
+              Storage space: 10 GB
+              <br />
+              Replication factor: 3
+              <br />
+              Region: East China 1
+              <br />
+            </span>
           </td>
         </tr>
       </tbody>
diff --git a/components/descriptions/demo/style.md b/components/descriptions/demo/style.md
index 826215c490..9824758288 100644
--- a/components/descriptions/demo/style.md
+++ b/components/descriptions/demo/style.md
@@ -15,54 +15,59 @@ debug: true
 Customize label & wrapper style
 
 ```tsx
-import { Descriptions, Divider } from 'antd';
+import { Descriptions, Divider, Switch, Radio } from 'antd';
 
 const labelStyle: React.CSSProperties = { background: 'red' };
 const contentStyle: React.CSSProperties = { background: 'green' };
 
-function renderCelledDesc(bordered?: boolean) {
-  return (
-    <Descriptions title="User Info" bordered={bordered}>
-      <Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
-        Cloud Database
-      </Descriptions.Item>
-      <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-      <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
-    </Descriptions>
-  );
-}
+type LayoutType = 'horizontal' | 'vertical' | undefined;
+
+const Demo = () => {
+  const [border, setBorder] = React.useState(true);
+  const [layout, setLayout] = React.useState('horizontal' as LayoutType);
 
-function renderRootDesc(bordered?: boolean) {
   return (
-    <Descriptions
-      title="Root style"
-      labelStyle={labelStyle}
-      contentStyle={contentStyle}
-      bordered={bordered}
-    >
-      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-      <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-      <Descriptions.Item
-        label="Automatic Renewal"
-        labelStyle={{ color: 'orange' }}
-        contentStyle={{ color: 'blue' }}
+    <>
+      <Switch
+        checkedChildren="Border"
+        unCheckedChildren="No Border"
+        checked={border}
+        onChange={e => setBorder(e)}
+      />
+      <Divider />
+      <Radio.Group onChange={e => setLayout(e.target.value)} value={layout}>
+        <Radio value="horizontal">horizontal</Radio>
+        <Radio value="vertical">vertical</Radio>
+      </Radio.Group>
+      <Divider />
+      <Descriptions title="User Info" bordered={border} layout={layout}>
+        <Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
+          Cloud Database
+        </Descriptions.Item>
+        <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
+      </Descriptions>
+      <Divider />
+      <Descriptions
+        title="Root style"
+        labelStyle={labelStyle}
+        contentStyle={contentStyle}
+        bordered={border}
+        layout={layout}
       >
-        YES
-      </Descriptions.Item>
-    </Descriptions>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
+        <Descriptions.Item
+          label="Automatic Renewal"
+          labelStyle={{ color: 'orange' }}
+          contentStyle={{ color: 'blue' }}
+        >
+          YES
+        </Descriptions.Item>
+      </Descriptions>
+    </>
   );
-}
+};
 
-ReactDOM.render(
-  <>
-    {renderCelledDesc()}
-    {renderCelledDesc(true)}
-
-    <Divider />
-
-    {renderRootDesc()}
-    {renderRootDesc(true)}
-  </>,
-  mountNode,
-);
+ReactDOM.render(<Demo />, mountNode);
 ```