feat: Tour support classnames and styles

docs/examples/basic.less

@@ -29,7 +29,7 @@
 }
 
 // Wrapper for the tour content
-.@{tour-prefix-cls}-inner {
+.@{tour-prefix-cls}-section {
   text-align: left;
   text-decoration: none;
   border-radius: 6px;;

src/Mask.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Portal from '@rc-component/portal';
 import type { PosInfo } from './hooks/useTarget';
 import useId from 'rc-util/lib/hooks/useId';
+import { SemanticName } from './interface';
 
 const COVER_PROPS = {
   fill: 'transparent',
@@ -21,6 +22,8 @@ export interface MaskProps {
   animated?: boolean | { placeholder: boolean };
   zIndex?: number;
   disabledInteraction?: boolean;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const Mask = (props: MaskProps) => {
@@ -34,7 +37,9 @@ const Mask = (props: MaskProps) => {
     open,
     animated,
     zIndex,
-    disabledInteraction
+    disabledInteraction,
+    styles,
+    classNames: tourClassNames,
   } = props;
 
   const id = useId();
@@ -48,7 +53,7 @@ const Mask = (props: MaskProps) => {
   return (
     <Portal open={open} autoLock>
       <div
-        className={classNames(`${prefixCls}-mask`, rootClassName)}
+        className={classNames(`${prefixCls}-mask`, rootClassName, tourClassNames?.mask)}
         style={{
           position: 'fixed',
           left: 0,
@@ -57,7 +62,8 @@ const Mask = (props: MaskProps) => {
           bottom: 0,
           zIndex,
           pointerEvents: pos && !disabledInteraction ? 'none' : 'auto',
-          ...style
+          ...style,
+          ...styles?.mask,
         }}
       >
         {showMask ? (

src/Tour.tsx

@@ -51,6 +51,10 @@ const Tour: React.FC<TourProps> = props => {
     closable,
     builtinPlacements,
     disabledInteraction,
+    styles,
+    classNames: tourClassNames,
+    className,
+    style,
     ...restProps
   } = props;
 
@@ -66,7 +70,7 @@ const Tour: React.FC<TourProps> = props => {
     postState: origin =>
       mergedCurrent < 0 || mergedCurrent >= steps.length
         ? false
-        : origin ?? true,
+        : (origin ?? true),
   });
 
   // Record if already rended in the DOM to avoid `findDOMNode` issue
@@ -157,6 +161,8 @@ const Tour: React.FC<TourProps> = props => {
 
   const getPopupElement = () => (
     <TourStep
+      styles={styles}
+      classNames={tourClassNames}
       arrow={mergedArrow}
       key="content"
       prefixCls={prefixCls}
@@ -192,6 +198,8 @@ const Tour: React.FC<TourProps> = props => {
   return (
     <>
       <Mask
+        styles={styles}
+        classNames={tourClassNames}
         zIndex={zIndex}
         prefixCls={prefixCls}
         pos={posInfo}
@@ -222,13 +230,15 @@ const Tour: React.FC<TourProps> = props => {
         <Portal open={mergedOpen} autoLock>
           <div
             className={classNames(
+              className,
               rootClassName,
               `${prefixCls}-target-placeholder`,
             )}
             style={{
               ...(posInfo || CENTER_PLACEHOLDER),
               position: 'fixed',
               pointerEvents: 'none',
+              ...style,
             }}
           />
         </Portal>

src/TourStep/DefaultPanel.tsx

@@ -3,8 +3,8 @@ import type { TourStepProps } from '../interface';
 import classNames from 'classnames';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 
-export type DefaultPanelProps = Exclude<TourStepProps, "closable"> & {
-  closable: Exclude<TourStepProps["closable"], boolean>;
+export type DefaultPanelProps = Exclude<TourStepProps, 'closable'> & {
+  closable: Exclude<TourStepProps['closable'], boolean>;
 };
 
 export default function DefaultPanel(props: DefaultPanelProps) {
@@ -20,14 +20,21 @@ export default function DefaultPanel(props: DefaultPanelProps) {
     onFinish,
     className,
     closable,
+    classNames: tourClassNames,
+    styles,
   } = props;
   const ariaProps = pickAttrs(closable || {}, true);
-  const closeIcon = closable?.closeIcon ?? <span className={`${prefixCls}-close-x`}>&times;</span>;
+  const closeIcon = closable?.closeIcon ?? (
+    <span className={`${prefixCls}-close-x`}>&times;</span>
+  );
   const mergedClosable = !!closable;
 
   return (
-    <div className={classNames(`${prefixCls}-content`, className)}>
-      <div className={`${prefixCls}-inner`}>
+    <div className={classNames(`${prefixCls}-pannel`, className)}>
+      <div
+        className={classNames(`${prefixCls}-section`, tourClassNames?.section)}
+        style={styles?.section}
+      >
         {mergedClosable && (
           <button
             type="button"
@@ -39,24 +46,49 @@ export default function DefaultPanel(props: DefaultPanelProps) {
             {closeIcon}
           </button>
         )}
-        <div className={`${prefixCls}-header`}>
-          <div className={`${prefixCls}-title`}>{title}</div>
+        <div
+          className={classNames(`${prefixCls}-header`, tourClassNames?.header)}
+          style={styles?.header}
+        >
+          <div
+            className={classNames(`${prefixCls}-title`, tourClassNames?.title)}
+            style={styles?.title}
+          >
+            {title}
+          </div>
         </div>
-        <div className={`${prefixCls}-description`}>{description}</div>
-        <div className={`${prefixCls}-footer`}>
+        <div
+          className={classNames(
+            `${prefixCls}-description`,
+            tourClassNames?.description,
+          )}
+          style={styles?.description}
+        >
+          {description}
+        </div>
+        <div
+          className={classNames(`${prefixCls}-footer`, tourClassNames?.footer)}
+          style={styles?.footer}
+        >
           <div className={`${prefixCls}-sliders`}>
             {total > 1
               ? [...Array.from({ length: total }).keys()].map((item, index) => {
-                return (
-                  <span
-                    key={item}
-                    className={index === current ? 'active' : ''}
-                  />
-                );
-              })
+                  return (
+                    <span
+                      key={item}
+                      className={index === current ? 'active' : ''}
+                    />
+                  );
+                })
               : null}
           </div>
-          <div className={`${prefixCls}-buttons`}>
+          <div
+            className={classNames(
+              `${prefixCls}-actions`,
+              tourClassNames?.actions,
+            )}
+            style={styles?.actions}
+          >
             {current !== 0 ? (
               <button className={`${prefixCls}-prev-btn`} onClick={onPrev}>
                 Prev

src/interface.ts

@@ -4,6 +4,15 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { Gap } from './hooks/useTarget';
 import { type DefaultPanelProps } from './TourStep/DefaultPanel';
 
+export type SemanticName =
+  | 'section'
+  | 'footer'
+  | 'actions'
+  | 'header'
+  | 'title'
+  | 'description'
+  | 'mask';
+
 export interface TourStepInfo {
   arrow?: boolean | { pointAtCenter: boolean };
   target?: HTMLElement | (() => HTMLElement) | null | (() => null);
@@ -33,9 +42,15 @@ export interface TourStepProps extends TourStepInfo {
   renderPanel?: (step: TourStepProps, current: number) => ReactNode;
   onPrev?: () => void;
   onNext?: () => void;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  className?: string;
+  style?: React.CSSProperties;
   steps?: TourStepInfo[];
   open?: boolean;
   defaultCurrent?: number;