fix: Missing render with style & className

fix ant-design/ant-design#21354

Author: zombieJ

src/Cell/index.tsx

@@ -114,7 +114,8 @@ function Cell<RecordType extends DefaultRecordType>(
     childNode = <span className={`${cellPrefixCls}-content`}>{childNode}</span>;
   }
 
-  const { colSpan: cellColSpan, rowSpan: cellRowSpan } = cellProps || {};
+  const { colSpan: cellColSpan, rowSpan: cellRowSpan, style: cellStyle, className: cellClassName } =
+    cellProps || {};
   const mergedColSpan = cellColSpan !== undefined ? cellColSpan : colSpan;
   const mergedRowSpan = cellRowSpan !== undefined ? cellRowSpan : rowSpan;
 
@@ -169,8 +170,9 @@ function Cell<RecordType extends DefaultRecordType>(
         [`${cellPrefixCls}-with-append`]: appendNode,
       },
       additionalProps.className,
+      cellClassName,
     ),
-    style: { ...additionalProps.style, ...alignStyle, ...fixedStyle },
+    style: { ...additionalProps.style, ...alignStyle, ...fixedStyle, ...cellStyle },
     ref: isRefComponent(Component) ? ref : null,
   };
 

tests/Table.spec.js

@@ -299,6 +299,26 @@ describe('Table.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('render with style & className', () => {
+    const columns = [
+      {
+        dataIndex: 'key',
+        render: text => ({
+          props: {
+            style: { background: 'red' },
+            className: 'customize-render',
+          },
+          children: text,
+        }),
+      },
+    ];
+
+    const wrapper = mount(<Table columns={columns} data={[{ key: '' }]} />);
+    const props = wrapper.find('td').props();
+    expect(props.style).toEqual(expect.objectContaining({ background: 'red' }));
+    expect(props.className.includes('customize-render')).toBeTruthy();
+  });
+
   it('renders rowSpan correctly', () => {
     const columns = [
       {