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

Posted 2023-02-19

【中文标题】画布区域样式的正确方法是故事书

【英文标题】：What is the correct way to style canvas area is storybook

【发布时间】：2020-05-27 20:40:49

【问题描述】：

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

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

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

【参考方案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>
  )
]

帮我解决了问题