diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index 90bb04a48..8b0d22162 100644 --- a/src/Cell/index.tsx +++ b/src/Cell/index.tsx @@ -212,11 +212,13 @@ function Cell(props: CellProps) { 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 index cdd558080..e06621a76 100644 --- 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( + ({ + style: { + color: 'red', + textAlign: 'end', // overwrite align + }, + }), + }, + ]} + />, + ); + + expect(wrapper.find('thead th').prop('style')).toEqual({ + color: 'red', + textAlign: 'end', + }); + }); });