有没有办法有选择地更改 Storybook 故事宽度（即 Storybook-root）？

Question

我想看看是否有办法改变选定故事的宽度。我的组件是 100% 宽度，我不想更改它，因为它是父组件的 100%。对于故事书来说，这就是id="storybook-root生活的地方。下面的第一个屏幕截图显示了默认情况下的样子。我想将宽度设置为 500px（第二个屏幕截图）。

我知道我可以创建一个 html 页面并在其中添加样式，但这适用于所有故事。我希望能够更新选定故事的宽度。

Answer 1

Storybooklayout参数可以接受 3 个不同的值，即centered、fullscreen、 或padded，其中padded是默认值。在上面问题中共享的第二个屏幕截图中，storybook-root包含的css 选择器.sb-show-main.sb-main-centered推断故事布局设置为centered. 它可以更改为fullscreen, 或padded。另请参考。https://storybook.js.org/docs/react/configure/story-layout

const meta = {
  title: "Title/ComponentName",
  component: ComponentName,
  parameters: {
    layout: "fullscreen", // or `padded` by default
  },
};