Allow spotlight styles to be updated from outside

When <Joyride /> is used as third party lib in host react applications, there are several instances where you might need a more finer control on how things are displayed. This change allows developers to manipulate spotlight style if they want according to their needs.

In our case, we are using <Joyride /> with react-pdf to create highlighted section in the pdf. So we need finer control over the spotlight CSS being displayed in our app.

src/components/Overlay.tsx

@@ -109,7 +109,6 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
     const top = getElementPosition(element, spotlightPadding, disableScrollParentFix);
 
     return {
-      ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight),
       height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2),
       left: Math.round((elementRect?.left ?? 0) - spotlightPadding),
       opacity: showSpotlight ? 1 : 0,
@@ -118,6 +117,7 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
       top,
       transition: 'opacity 0.2s',
       width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2),
+      ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight),
     } satisfies React.CSSProperties;
   }