Custom spotlight styling for individual steps

[DonHarishAxe]

Expected behavior Need to set border radius for spotlights per step

Actual behavior Unable to find a way to do it

Steps to reproduce the problem

React version

React-Joyride version v2

Browser name and version

Error stack (if available)

If you want to get this issue fixed quickly, make sure to send a public URL or codesandbox example.

[MilllerTime]

Yeah, this would be a nice feature to document. It might even make a good high-level option. Anyways, if you dig in styles.js (as the docs recommend) you can see how all the internal styling works.

To set a custom border radius, use the following code. Note that you can also use the customStyles object on a per-step basis to change the border radius between different steps if needed.

const customStyles = {
  spotlight: {
    // Set your border-radius here!
    borderRadius: 100
  }
};

<Joyride
  styles={customStyles }
  // ...other joyride props
/>

[gilbarbara]

Yep, changing the styles will do!

[admehta01]

I'm getting an error when trying this w/ TypeScript ("@types/react-joyride": "2.0.0") and the latest react-joyride version as of today.

[ts] Type '{ spotlight: { borderRadius: number; }; }' has no properties in common with type 'StepStyles'.

index.d.ts(173, 5): The expected type comes from property 'styles' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly'

Any ideas?

[ludwich]

TypeScript file is missing definitions for anything that goes outside of defaultOptions which is options. Either add the types or just override with these setting.

interface IStepEx extends Step { styles?: IStepStylesEx; }

interface IStepStylesEx extends StepStyles {

}