From 8e8433c426509bb08daecdbedf6971b064641dc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=A4=E4=B9=8B=E5=85=AE=E5=8E=9F?=
 <88939906+kongmingLatern@users.noreply.github.com>
Date: Sat, 3 Jun 2023 12:45:26 +0800
Subject: [PATCH] fix: fix divider component innerStyle style error (#42797)

* fix: fix style transformation

* fix: fix style transformation

* fix: eslint

* feat: compatible with str writing

* fix: lint

* refactor: orientationMargin transform

* docs: update docs

* chore:add process.env.NODE_ENV displayName
---
 components/divider/index.en-US.md |  2 +-
 components/divider/index.tsx      | 14 ++++++++++++--
 components/divider/index.zh-CN.md |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
index 786dc76188..e6f4d5faec 100644
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@@ -34,7 +34,7 @@ A divider line separates different content.
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
 | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - |  |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - |  |
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index cab33801a0..7337ad7339 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -57,9 +57,19 @@ const Divider: React.FC<DividerProps> = (props) => {
     rootClassName,
   );
 
+  const memoizedOrientationMargin = React.useMemo<string | number>(() => {
+    if (typeof orientationMargin === 'number') {
+      return orientationMargin;
+    }
+    if (/^\d+$/.test(orientationMargin!)) {
+      return Number(orientationMargin);
+    }
+    return orientationMargin!;
+  }, [orientationMargin]);
+
   const innerStyle: React.CSSProperties = {
-    ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
-    ...(hasCustomMarginRight && { marginRight: orientationMargin }),
+    ...(hasCustomMarginLeft && { marginLeft: memoizedOrientationMargin }),
+    ...(hasCustomMarginRight && { marginRight: memoizedOrientationMargin }),
   };
 
   // Warning children not work in vertical mode
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index b818c1b96d..fb2207ddae 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -35,7 +35,7 @@ group:
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
 | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - |  |
+| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |