chore: Adjust style merge order (#1207)

react-component · Nov 26, 2024 · f3d7284 · f3d7284
1 parent 7780307
commit f3d7284
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -212,11 +212,13 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     alignStyle.textAlign = align;
   }
 
+  // The order is important since user can overwrite style.
+  // For example ant-design/ant-design#51763
   const mergedStyle = {
+    ...legacyCellProps?.style,
     ...fixedStyle,
-    ...additionalProps.style,
     ...alignStyle,
-    ...legacyCellProps?.style,
+    ...additionalProps.style,
   };
 
   // >>>>> Children Node

diff --git a/tests/Cell.spec.tsx b/tests/Cell.spec.tsx
@@ -122,4 +122,28 @@ describe('Table.Cell', () => {
 
     expect(wrapper.find('thead th').prop('title')).toEqual('Bamboo');
   });
+
+  // https://github.com/ant-design/ant-design/issues/51763
+  it('style merge order', () => {
+    const wrapper = mount(
+      <Table
+        columns={[
+          {
+            align: 'center',
+            onHeaderCell: () => ({
+              style: {
+                color: 'red',
+                textAlign: 'end', // overwrite align
+              },
+            }),
+          },
+        ]}
+      />,
+    );
+
+    expect(wrapper.find('thead th').prop('style')).toEqual({
+      color: 'red',
+      textAlign: 'end',
+    });
+  });
 });