feat: Support label & content style of Desc (#27897)

* feat: Support label & content style of Desc

* test: Update snasphot

* docs: fix desc

components/descriptions/Cell.tsx

@@ -11,6 +11,8 @@ export interface CellProps {
   className?: string;
   component: string;
   style?: React.CSSProperties;
+  labelStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   bordered?: boolean;
   label?: React.ReactNode;
   content?: React.ReactNode;
@@ -23,6 +25,8 @@ const Cell: React.FC<CellProps> = ({
   span,
   className,
   style,
+  labelStyle,
+  contentStyle,
   bordered,
   label,
   content,
@@ -60,11 +64,16 @@ const Cell: React.FC<CellProps> = ({
             className={classNames(`${itemPrefixCls}-item-label`, {
               [`${itemPrefixCls}-item-no-colon`]: !colon,
             })}
+            style={labelStyle}
           >
             {label}
           </span>
         )}
-        {content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>}
+        {content && (
+          <span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
+            {content}
+          </span>
+        )}
       </div>
     </Component>
   );

components/descriptions/Item.tsx

@@ -5,6 +5,8 @@ export interface DescriptionsItemProps {
   className?: string;
   style?: React.CSSProperties;
   label?: React.ReactNode;
+  labelStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   children: React.ReactNode;
   span?: number;
 }

components/descriptions/Row.tsx

@@ -23,6 +23,8 @@ function renderCells(
           prefixCls: itemPrefixCls = prefixCls,
           className,
           style,
+          labelStyle,
+          contentStyle,
           span = 1,
         },
         key,
@@ -35,6 +37,8 @@ function renderCells(
             key={`${type}-${key || index}`}
             className={className}
             style={style}
+            labelStyle={labelStyle}
+            contentStyle={contentStyle}
             span={span}
             colon={colon}
             component={component}
@@ -50,7 +54,7 @@ function renderCells(
         <Cell
           key={`label-${key || index}`}
           className={className}
-          style={style}
+          style={{ ...style, ...labelStyle }}
           span={1}
           colon={colon}
           component={component[0]}
@@ -61,7 +65,7 @@ function renderCells(
         <Cell
           key={`content-${key || index}`}
           className={className}
-          style={style}
+          style={{ ...style, ...contentStyle }}
           span={span * 2 - 1}
           component={component[1]}
           itemPrefixCls={itemPrefixCls}

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

@@ -811,6 +811,158 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
+Array [
+  <div
+    class="ant-descriptions"
+  >
+    <div
+      class="ant-descriptions-header"
+    >
+      <div
+        class="ant-descriptions-title"
+      >
+        User Info
+      </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"
+                >
+                  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>
+  </div>,
+  <div
+    class="ant-descriptions ant-descriptions-bordered"
+  >
+    <div
+      class="ant-descriptions-header"
+    >
+      <div
+        class="ant-descriptions-title"
+      >
+        User Info
+      </div>
+    </div>
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+              style="background:red"
+            >
+              Product
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+              style="background:green"
+            >
+              Cloud Database
+            </td>
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              Billing Mode
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              Prepaid
+            </td>
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              Automatic Renewal
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              YES
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
 <div
   class="ant-descriptions"

components/descriptions/demo/style.md

@@ -0,0 +1,43 @@
+---
+order: 999
+title:
+  zh-CN: 自定义 label & wrapper 样式
+  en-US: Customize label & wrapper style
+debug: true
+---
+
+## zh-CN
+
+自定义 label & wrapper 样式
+
+## en-US
+
+Customize label & wrapper style
+
+```tsx
+import { Descriptions } from 'antd';
+
+const labelStyle: React.CSSProperties = { background: 'red' };
+const contentStyle: React.CSSProperties = { background: 'green' };
+
+ReactDOM.render(
+  <>
+    <Descriptions title="User Info">
+      <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>
+
+    <Descriptions title="User Info" 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>
+  </>,
+  mountNode,
+);
+```

components/descriptions/index.en-US.md

@@ -30,7 +30,10 @@ Commonly displayed on the details page.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| contentStyle | Customize label style | CSSProperties | - | 4.9.0 |
 | label | The description of the content | ReactNode | - |  |
+| labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
 | span | The number of columns included | number | 1 |  |
 
 > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.
+> When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.

components/descriptions/index.zh-CN.md

@@ -31,7 +31,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
 | label | 内容的描述 | ReactNode | - |  |
+| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
 | span | 包含列的数量 | number | 1 |  |
 
 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。
+> 当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。