feat: supports classnames & styles

Author: thinkasany

src/Popup.tsx

@@ -8,14 +8,21 @@ export interface ContentProps {
   overlayInnerStyle?: React.CSSProperties;
   className?: string;
   style?: React.CSSProperties;
+  overlayInnerClassName?: string;
 }
 
 export default function Popup(props: ContentProps) {
-  const { children, prefixCls, id, overlayInnerStyle, className, style } = props;
+  const { children, prefixCls, id, overlayInnerStyle, overlayInnerClassName, className, style } =
+    props;
 
   return (
     <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      <div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
+      <div
+        className={classNames(`${prefixCls}-inner`, overlayInnerClassName)}
+        id={id}
+        role="tooltip"
+        style={overlayInnerStyle}
+      >
         {typeof children === 'function' ? children() : children}
       </div>
     </div>

src/Tooltip.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
+import classNames from 'classnames';
 
 export interface TooltipProps
   extends Pick<
@@ -42,6 +43,18 @@ export interface TooltipProps
   id?: string;
   overlayInnerStyle?: React.CSSProperties;
   zIndex?: number;
+  styles?: TootipStyles;
+  classNames?: TooltipClassNames;
+}
+
+export interface TootipStyles {
+  root?: React.CSSProperties;
+  inner?: React.CSSProperties;
+}
+
+export interface TooltipClassNames {
+  root?: string;
+  inner?: string;
 }
 
 export interface TooltipRef extends TriggerRef {}
@@ -70,6 +83,8 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     overlay,
     id,
     showArrow = true,
+    classNames: tooltipClassNames,
+    styles: tooltipStyles,
     ...restProps
   } = props;
 
@@ -82,14 +97,20 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
   }
 
   const getPopupElement = () => (
-    <Popup key="content" prefixCls={prefixCls} id={id} overlayInnerStyle={overlayInnerStyle}>
+    <Popup
+      key="content"
+      prefixCls={prefixCls}
+      id={id}
+      overlayInnerClassName={tooltipClassNames?.inner}
+      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.inner }}
+    >
       {overlay}
     </Popup>
   );
 
   return (
     <Trigger
-      popupClassName={overlayClassName}
+      popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
       prefixCls={prefixCls}
       popup={getPopupElement}
       action={trigger}
@@ -106,7 +127,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyTooltipOnHide}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={overlayStyle}
+      popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
       mouseEnterDelay={mouseEnterDelay}
       arrow={showArrow}
       {...extraProps}

tests/index.test.tsx

@@ -251,4 +251,35 @@ describe('rc-tooltip', () => {
 
     expect(nodeRef.current.nativeElement).toBe(container.querySelector('button'));
   });
+  it('should apply custom styles to Tooltip', () => {
+    const customClassNames = {
+      inner: 'custom-inner',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      inner: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+        <button />
+      </Tooltip>,
+    );
+
+    const tooltipElement = container.querySelector('.rc-tooltip');
+    const tooltipInnerElement = container.querySelector('.rc-tooltip-inner');
+
+    // 验证 classNames
+    expect(tooltipElement.classList).toContain('custom-root');
+    expect(tooltipInnerElement.classList).toContain('custom-inner');
+
+    // 验证 styles
+    const tooltipElementStyle = getComputedStyle(tooltipElement);
+    const tooltipInnerElementStyle = getComputedStyle(tooltipInnerElement);
+
+    expect(tooltipElementStyle.backgroundColor).toBe('blue');
+    expect(tooltipInnerElementStyle.color).toBe('red');
+  });
 });