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

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

工具

我在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左右，手机模式的遮罩层倒是变小了，内容却没跟着缩。是不是哪里配置漏了？

我来解答赞 15 收藏

反馈

2 条解答

Top丶建英 Lv1

这个问题我之前也遇到过，说白了就是配置方式有点搞复杂了。

你在preview.js里的配置其实没问题，但问题出在用addDecorator(withParameters)这一步。在Storybook 6+的CSF格式里，withParameters不是这么玩的。

简单粗暴的解决办法：

直接在preview.js配好就行，story文件里根本不需要再加withParameters。preview.js配置完，所有story自动就会应用这个viewport。

如果你的组件故事里之前写过类似这样的东西：

export const Primary = withParameters(...) // 删掉这个

直接删掉，refresh一下页面应该就生效了。

如果还是不行，那大概率是你组件本身的问题。Viewport addon只是改变了预览区域的iframe尺寸，但你组件里面的内容能不能缩进去，取决于组件自己的样式。

检查一下你的组件CSS：

- 组件根部有没有写死width（比如width: 800px）
- 或者有没有max-width: 800px这种限制
- 用width: 100%或者不写宽度，让内容自己撑满容器

我之前遇到的就是这个问题——组件里写了个width: 1000px，viewport怎么改它都是那么大。改完CSS瞬间就对了。

你先去把story文件里那个withParameters的decorator删掉试试，应该就成了。

2026-03-20 09:07

书生シ玲玲 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