Storybook的Viewport设置后预览区域怎么还是固定大小？

耘博 Dev 提问于 2026-02-11 03:22:27 阅读 21

工具

我在Storybook里用addParameters设置了viewport，配置了iPhone 12的尺寸，但预览区域还是固定在默认宽度。明明按照文档加了withParameters，刷新页面后手机样式显示出来了，但内容区域宽度没变，左右还是有空白…

试过在.storybook/preview.js里这样写：


export const parameters = {
  viewport: {
    viewports: {
      iphone12: { name: 'iPhone 12', styles: { width: '390px', height: '844px' } }
    },
    defaultViewport: 'iphone12'
  }
}

然后在组件故事里用了addDecorator(withParameters)，但预览区宽度还是卡在800px左右，手机模式的遮罩层倒是变小了，内容却没跟着缩。是不是哪里配置漏了？

我来解答赞 9 收藏

反馈

1 条解答

书生シ玲玲 Lv1

你那个配置其实没问题，问题出在Storybook 6之后改了API，addDecorator(withParameters)这句根本不需要，还可能干扰渲染。

直接删掉所有addDecorator相关的代码，就用preview.js里的parameters配置就够了。你现在的情况是viewport装饰器叠加了，导致样式冲突。

复制这个，把preview.js改成这样：

export const parameters = {

  viewport: {

    viewports: {

      iphone12: {

        name: 'iPhone 12',

        styles: {

          width: '390px',

          height: '844px'

        }

      }

    },

    defaultViewport: 'iphone12'

  }

}

然后去你的xxx.stories.js里，确保没import { addDecorator } from '@storybook/...' 这种东西，更不要调withParameters。

如果用了TS，顺便检查下tsconfig是不是把preview.js排除了。改完重启下Storybook，预览区宽度就会跟着设备走，不会再有800px的默认限制了。

2026-02-11 07:01