故事书集组件置于页面中心

Question

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

组件本身已添加到左上角。在此示例中：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

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

我该怎么做？

Answer 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
      },
    }))

希望这会有所帮助。