How to add a global decorator in storybook?

Member

by gilbert , in category: Javascript , 9 months ago

How to add a global decorator in storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by ryan.murray , 9 months ago

@gilbert 

To add a global decorator in Storybook, you can create a file called .storybook/preview.js in your project's root directory. In this file, you can import your global decorator and apply it to all of your stories.


Here is an example of how you can add a global decorator to Storybook:

  1. Create a new file named .storybook/preview.js in your project's root directory.
  2. In this file, you can import your global decorator and apply it to all stories using the addDecorator function provided by Storybook. For example, if you have a decorator that adds a specific style or layout to all your stories, you can import it and apply it like this:
1
2
3
4
import { addDecorator } from '@storybook/react';
import GlobalDecorator from './GlobalDecorator';

addDecorator(GlobalDecorator);


  1. Save the file and restart your Storybook server. Your global decorator should now be applied to all stories in Storybook.


By adding a global decorator in Storybook, you can easily apply common styles or configurations to all of your stories, making it easier to maintain a consistent look and feel across your components.