Styles

For finer control over individual elements, use the styles prop. Each key maps to a specific UI element and accepts a CSSProperties object, except for spotlight which accepts SVGAttributes<SVGPathElement>.

Available Style Keys

KeyElement
arrowArrow element
beaconBeacon visual (size, border-radius)
beaconInnerBeacon inner pulse element
beaconOuterBeacon outer ring element
beaconWrapperBeacon wrapper button
buttonBackBack button
buttonCloseClose button
buttonPrimaryNext/Last button
buttonSkipSkip button
floaterFloating container
loaderLoader wrapper
overlayOverlay backdrop
spotlightSpotlight (SVG path)
tooltipTooltip wrapper
tooltipContainerTooltip inner container
tooltipContentTooltip body content
tooltipFooterTooltip footer
tooltipFooterSpacerTooltip footer spacer
tooltipTitleTooltip title

Example

<Joyride
  steps={steps}
  styles={{
    tooltip: {
      borderRadius: 16,
    },
    buttonPrimary: {
      backgroundColor: '#e91e63',
      borderRadius: 8,
    },
    buttonBack: {
      color: '#666',
    },
  }}
/>

Spotlight Example

The spotlight key accepts SVG path attributes, giving you full control over the spotlight appearance:

<Joyride
  steps={steps}
  styles={{
    spotlight: {
      stroke: '#ff0044',
      strokeWidth: 3,
      strokeDasharray: '8 4',
    },
  }}
/>

Check styles.ts for the complete default styles.

tip

If you need full control, check the custom components documentation.