如何为Storybook渲染组件的容器设置最小宽高？

当然可以，不用额外创建Page组件，有几种简单的方式给Storybook的组件容器设置最小宽高：

方法1：使用Storybook的Decorators（推荐） #

直接在目标Story的配置里添加decorators，用一个带样式的容器包裹组件，代码示例：

export const horizontalSlide: Story = {
  args: {
    config: horizontalOptions
  },
  decorators: [
    (Story) => (
      <div style={{ minWidth: '800px', minHeight: '400px' }}>
        <Story />
      </div>
    )
  ],
};

这里通过div给组件套了一层父容器，设置minWidth和minHeight后，你的自适应组件就能获取到父容器的尺寸，正常渲染了。如果需要更通用的样式，还可以把这个容器样式抽成复用的函数。

方法2：通过全局配置统一设置（适合多个组件需要的场景） #

如果你的多个组件都需要类似的最小尺寸，可以在.storybook/preview.js里添加全局decorator：

export const decorators = [
  (Story) => (
    <div style={{ minWidth: '600px', minHeight: '300px' }}>
      <Story />
    </div>
  ),
];

这样所有Story都会自动套上这个带最小尺寸的容器，不用逐个配置。

方法3：利用Storybook的Layout参数（快速布局） #

如果你只需要让组件居中并占用一定空间，可以用Storybook内置的layout参数，但灵活性不如decorators：

export const horizontalSlide: Story = {
  args: {
    config: horizontalOptions
  },
  parameters: {
    layout: 'centered', // 内置布局选项：centered、fullscreen、padded
  },
};

如果默认的centered布局尺寸不够，还是建议用decorators自定义容器样式。

内容的提问来源于stack exchange，提问作者Ole