diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap index 00d7865d66..af0dcd11c7 100644 --- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap @@ -31,6 +31,85 @@ exports[`Tour basic 1`] = ` `; +exports[`Tour custom step pre btn & next btn className & style 1`] = ` +
+
+
+
+ + + +
+
+ Show in Center +
+
+
+ Here is the content of Tour. +
+ +
+
+
+
+`; + exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`; exports[`Tour single 1`] = ` diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx index 5dcc54b5d6..f55b0fad05 100644 --- a/components/tour/__tests__/index.test.tsx +++ b/components/tour/__tests__/index.test.tsx @@ -259,4 +259,44 @@ describe('Tour', () => { panelRender({ total: undefined, title:
test
}, 0, 'default'); }).not.toThrow(); }); + + it('custom step pre btn & next btn className & style', () => { + const App: React.FC = () => ( + + ), + }, + ]} + /> + ); + + const { container } = render(); + // className + expect( + screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'), + ).toEqual(true); + // style + expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual( + 'rgb(69, 69, 255)', + ); + expect(container.firstChild).toMatchSnapshot(); + }); }); diff --git a/components/tour/interface.ts b/components/tour/interface.ts index 0831e51e8b..fd682d759a 100644 --- a/components/tour/interface.ts +++ b/components/tour/interface.ts @@ -15,8 +15,18 @@ export type TourProps = Omit & { export interface TourStepProps extends RCTourStepProps { cover?: ReactNode; // 展示的图片或者视频 - nextButtonProps?: { children?: ReactNode; onClick?: () => void }; - prevButtonProps?: { children?: ReactNode; onClick?: () => void }; + nextButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; + prevButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; stepRender?: (current: number, total: number) => ReactNode; type?: 'default' | 'primary'; // default 类型,影响底色与文字颜色 } diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx index 867780f997..cb9d777fdf 100644 --- a/components/tour/panelRender.tsx +++ b/components/tour/panelRender.tsx @@ -103,7 +103,7 @@ const panelRender = ( {...prevButtonProps} onClick={prevBtnClick} size="small" - className={`${prefixCls}-prev-btn`} + className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)} > {prevButtonProps?.children ?? contextLocale.Previous} @@ -113,7 +113,7 @@ const panelRender = ( {...nextButtonProps} onClick={nextBtnClick} size="small" - className={`${prefixCls}-next-btn`} + className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)} > {nextButtonProps?.children ?? (isLastStep ? contextLocale.Finish : contextLocale.Next)}