Typography editable mode should support className (#16307)

components/typography/Base.tsx

@@ -363,13 +363,15 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
   }
 
   renderEditInput() {
-    const { children, prefixCls } = this.props;
+    const { children, prefixCls, className, style } = this.props;
     return (
       <Editable
         value={typeof children === 'string' ? children : ''}
         onSave={this.onEditChange}
         onCancel={this.onEditCancel}
         prefixCls={prefixCls}
+        className={className}
+        style={style}
       />
     );
   }

components/typography/Editable.tsx

@@ -10,6 +10,8 @@ interface EditableProps {
   ['aria-label']?: string;
   onSave: (value: string) => void;
   onCancel: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 interface EditableState {
@@ -106,10 +108,10 @@ class Editable extends React.Component<EditableProps, EditableState> {
 
   render() {
     const { current } = this.state;
-    const { prefixCls, ['aria-label']: ariaLabel } = this.props;
+    const { prefixCls, ['aria-label']: ariaLabel, className, style } = this.props;
 
     return (
-      <div className={`${prefixCls} ${prefixCls}-edit-content`}>
+      <div className={`${prefixCls} ${prefixCls}-edit-content ${className}`} style={style}>
         <TextArea
           ref={this.setTextarea}
           value={current}

components/typography/__tests__/index.test.js

@@ -168,7 +168,14 @@ describe('Typography', () => {
           const onStart = jest.fn();
           const onChange = jest.fn();
 
-          const wrapper = mount(<Paragraph editable={{ onChange, onStart }}>Bamboo</Paragraph>);
+          const className = 'test';
+          const style = {};
+
+          const wrapper = mount(
+            <Paragraph editable={{ onChange, onStart }} className={className} style={style}>
+              Bamboo
+            </Paragraph>,
+          );
 
           wrapper
             .find('.ant-typography-edit')
@@ -177,6 +184,11 @@ describe('Typography', () => {
 
           expect(onStart).toHaveBeenCalled();
 
+          // Should have className
+          const props = wrapper.find('div').props();
+          expect(props.style).toEqual(style);
+          expect(props.className.includes(className)).toBeTruthy();
+
           wrapper.find('TextArea').simulate('change', {
             target: { value: 'Bamboo' },
           });