What is the correct way to style canvas area is storybook

Question

In storybook, all stories are sitting tight agains the top left corner of the container.

This is causing problems when displaying items that have visual appearance outside the relative container e.g. a box-shadow.

So I am wondering what is the best way to add margin to the surrounding container. I had a look in the theming docs of storybook, but could not find anything related?

Answer 1

In .storybook/preview.js, you can just add the following:

addDecorator(storyFn => (
  <>
    <div style={{ margin: '1rem' }}>{storyFn()}</div>
  </>
))

This way all the stories will appear with a margin of 1rem.