feat: support to config overlay inner style (#213)

* feat: support to config overlay inner style

* patch: add test case

Author: AshoneA

README.md

@@ -168,6 +168,12 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
           <td></td>
           <td>popup content</td>
         </tr>
+        <tr>
+          <td>overlayInnerStyle</td>
+          <td>Object</td>
+          <td></td>
+          <td>set overlay inner style</td>
+        </tr>
         <tr>
           <td>arrowContent</td>
           <td>React.Node</td>

examples/simple.js

@@ -26,6 +26,7 @@ class Test extends Component {
     },
     offsetX: placements.right.offset[0],
     offsetY: placements.right.offset[1],
+    overlayInnerStyle: undefined,
   };
 
   onPlacementChange = e => {
@@ -81,6 +82,12 @@ class Test extends Component {
     });
   };
 
+  onOverlayInnerStyleChange = () => {
+    this.setState(prevState => ({
+      overlayInnerStyle: prevState.overlayInnerStyle ? undefined : { background: 'red' },
+    }));
+  };
+
   preventDefault = e => {
     e.preventDefault();
   };
@@ -170,6 +177,15 @@ class Test extends Component {
               style={{ width: 50 }}
             />
           </label>
+          <label>
+            <input
+              value="overlayInnerStyle"
+              checked={!!state.overlayInnerStyle}
+              type="checkbox"
+              onChange={this.onOverlayInnerStyleChange}
+            />
+            overlayInnerStyle(red background)
+          </label>
         </div>
         <div style={{ margin: 100 }}>
           <Tooltip
@@ -184,6 +200,7 @@ class Test extends Component {
               offset: [this.state.offsetX, this.state.offsetY],
             }}
             transitionName={this.state.transitionName}
+            overlayInnerStyle={state.overlayInnerStyle}
           >
             <div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
           </Tooltip>

src/Content.tsx

@@ -4,13 +4,14 @@ export interface ContentProps {
   prefixCls?: string;
   overlay: (() => React.ReactNode) | React.ReactNode;
   id: string;
+  overlayInnerStyle?: React.CSSProperties;
 }
 
 const Content = (props: ContentProps) => {
-  const { overlay, prefixCls, id } = props;
+  const { overlay, prefixCls, id, overlayInnerStyle } = props;
 
   return (
-    <div className={`${prefixCls}-inner`} id={id} role="tooltip">
+    <div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
       {typeof overlay === 'function' ? overlay() : overlay}
     </div>
   );

src/Tooltip.tsx

@@ -30,6 +30,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
   id?: string;
   children?: React.ReactElement;
   popupVisible?: boolean;
+  overlayInnerStyle?: React.CSSProperties;
 }
 
 const Tooltip = (props: TooltipProps, ref) => {
@@ -50,6 +51,7 @@ const Tooltip = (props: TooltipProps, ref) => {
     destroyTooltipOnHide = false,
     defaultVisible,
     getTooltipContainer,
+    overlayInnerStyle,
     ...restProps
   } = props;
 
@@ -67,7 +69,13 @@ const Tooltip = (props: TooltipProps, ref) => {
       <div className={`${prefixCls}-arrow`} key="arrow">
         {arrowContent}
       </div>,
-      <Content key="content" prefixCls={prefixCls} id={id} overlay={overlay} />,
+      <Content
+        key="content"
+        prefixCls={prefixCls}
+        id={id}
+        overlay={overlay}
+        overlayInnerStyle={overlayInnerStyle}
+      />,
     ];
   };
 

tests/index.test.js

@@ -49,6 +49,22 @@ describe('rc-tooltip', () => {
       verifyContent(wrapper, 'Tooltip content');
     });
 
+    // https://github.com/ant-design/ant-design/pull/23155
+    it('using style inner style', () => {
+      const wrapper = mount(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={() => <strong className="x-content">Tooltip content</strong>}
+          overlayInnerStyle={{ background: 'red' }}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      wrapper.find('.target').simulate('click');
+      expect(wrapper.find('.rc-tooltip-inner').props().style).toEqual({ background: 'red' });
+    });
+
     it('access of ref', () => {
       const domRef = React.createRef();
       mount(