Styles

For finer control over individual elements, use the styles prop. Each key maps to a specific UI element and accepts a CSSProperties object.

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
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',
    },
  }}
/>

Check styles.ts for the complete default styles.

tip

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