Styling
Version 2 uses inline styles instead of V1 SCSS.
To update the default theme, just pass a
styles prop to the Joyride component,
You can control the overall theme with the special options object.1
const defaultOptions = {
2
arrowColor: '#fff',
3
backgroundColor: '#fff',
4
beaconSize: 36,
5
overlayColor: 'rgba(0, 0, 0, 0.5)',
6
primaryColor: '#f04',
7
spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
8
textColor: '#333',
9
width: undefined,
10
zIndex: 100,
11
};
Copied!
Example
1
import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
2
3
export class App extends React.Component {
4
state = {
5
run: false,
6
steps: [],
7
};
8
9
render () {
10
const { run, stepIndex, steps } = this.state;
11
12
return (
13
<div className="app">
14
<Joyride
15
run={run}
16
steps={steps}
17
styles={{
18
options: {
19
arrowColor: '#e3ffeb',
20
backgroundColor: '#e3ffeb',
21
overlayColor: 'rgba(79, 26, 0, 0.4)',
22
primaryColor: '#000',
23
textColor: '#004a14',
24
width: 900,
25
zIndex: 1000,
26
}
27
}}
28
...
29
/>
30
...
31
</div>
32
);
33
}
34
}
Copied!
You can customize the styles per step too.
Or if you need finer control you can use you own components for the beacon and tooltip. Check the custom components documentation.
Last modified 3mo ago
Copy link
Contents
Example