feat: support to config overlay inner style

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

@@ -12,6 +12,7 @@ class Test extends Component {
     },
     offsetX: placements.right.offset[0],
     offsetY: placements.right.offset[1],
+    overlayInnerStyle: undefined,
   };
 
   onPlacementChange = e => {
@@ -66,6 +67,12 @@ class Test extends Component {
     }));
   };
 
+  onOverlayInnerStyleChange = () => {
+    this.setState(prevState => ({
+      overlayInnerStyle: prevState.overlayInnerStyle ? undefined : { background: 'red' },
+    }));
+  };
+
   preventDefault = e => {
     e.preventDefault();
   };
@@ -78,10 +85,7 @@ class Test extends Component {
         <div style={{ margin: '10px 20px' }}>
           <label>
             placement:
-            <select
-              value={this.state.placement}
-              onChange={this.onPlacementChange}
-            >
+            <select value={this.state.placement} onChange={this.onPlacementChange}>
               {Object.keys(placements).map(p => (
                 <option key={p} value={p}>
                   {p}
@@ -156,6 +160,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
@@ -165,17 +178,14 @@ class Test extends Component {
             destroyTooltipOnHide={this.state.destroyTooltipOnHide}
             trigger={Object.keys(this.state.trigger)}
             onVisibleChange={this.onVisibleChange}
-            overlay={
-              <div style={{ height: 50, width: 50 }}>i am a tooltip</div>
-            }
+            overlay={<div style={{ height: 50, width: 50 }}>i am a tooltip</div>}
             align={{
               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>
+            <div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
           </Tooltip>
         </div>
       </div>

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

@@ -26,6 +26,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
   id?: string;
   children?: React.ReactElement;
   popupVisible?: boolean;
+  overlayInnerStyle?: React.CSSProperties;
 }
 
 const Tooltip = (props: TooltipProps, ref) => {
@@ -46,6 +47,7 @@ const Tooltip = (props: TooltipProps, ref) => {
     destroyTooltipOnHide = false,
     defaultVisible,
     getTooltipContainer,
+    overlayInnerStyle,
     ...restProps
   } = props;
 
@@ -63,7 +65,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(