故事书集组件到页面中心答案

【问题标题】：Storybook Set Component into the center of the page故事书集组件到页面中心
【发布时间】：2019-10-23 06:56:21
【问题描述】：

我正在将故事书引入我们的 React 组件。当我开始添加示例时：

组件本身被添加到左上角。在这个例子中：http://react.carbondesignsystem.com/?selectedKind=ComposedModal&selectedStory=Using%20Header%20%2F%20Footer%20Props&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

我们可以看到组件本身在页面中间刷新。

我该怎么做？

【问题讨论】：

标签： storybook

【解决方案1】：

您可以使用名为“@storybook/addon-centered”的 Storybook 插件。可以在这里找到：https://www.npmjs.com/package/@storybook/addon-centered

或者，您还可以为每个故事提供样式参数以设置特定模板的样式。这是一个简单的例子：

.add('Your sample story', () => ({
      template: `<sample-component class="sample-component-class"><sample-component>`,
      styles: ['.sample-component-class {display: flex; justify-content: center}'],
      props: {
         sampleProps
      },
    }))

希望这会有所帮助。

【讨论】：

【解决方案2】：

您甚至可以在 storybook 的 preview.js 文件中添加 layout: 'centered' 作为参数。 layout 参数也可以添加到组件或故事级别。详情请见https://storybook.js.org/docs/react/configure/story-layout。

【讨论】：