画布区域样式的正确方法是故事书答案

【问题标题】：What is the correct way to style canvas area is storybook画布区域样式的正确方法是故事书
【发布时间】：2020-05-27 20:40:49
【问题描述】：

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

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

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

【问题讨论】：

标签： storybook

【解决方案1】：

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


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

这样所有故事都会以 1rem 的边距显示。

【讨论】：

【解决方案2】：

添加到我的 preview.js：

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

帮我解决了问题

【讨论】：