canvas area is storybook 的正确样式是什么

Question

在故事书中，所有故事都紧靠容器的左上角。

这会导致在相关容器外部显示具有视觉外观的项目时出现问题，例如一个盒子阴影。

所以我想知道向周围容器添加边距的最佳方法是什么。我查看了故事书的主题文档，但找不到任何相关内容？

Answer 1

在.storybook/preview.js中，您只需添加以下内容即可：


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

这样所有的故事都会以 1rem 的边距出现。

Answer 2

添加到我的preview.js：

export const decorators = [
  (Story) => (
    <div style={{ margin: '3em'}}>
      <Story />
    </div>
  )
]

帮我解决了问题

What is the correct way to style canvas area is storybook