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

@@ -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` |  |

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

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` |  |