元素
元素
工具
博客
问答

Storybook中如何在多个stories间共享parameters配置？

萌新.景苑 阅读 18
工具

最近在用Storybook写组件文档时发现，每个stories文件都要重复写相同的parameters配置，比如布局和主题设置，这样维护起来好麻烦。我尝试把参数抽离到预设文件里，但运行时提示找不到globalTypes…

我按照文档在.main.js里配置了参数：


module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials'],
  // 尝试在这里添加parameters未生效
  parameters: {
    layout: 'fullscreen',
    docs: { inline: true }
  }
};

然后在具体story里用export参数覆盖，但这样还是得重复写基础配置。有没有办法让所有stories继承默认parameters？之前在预设文件里写过类似globalParameters，但好像用法不对…

我来解答 赞 3 收藏
二维码
手机扫码查看
反馈
2 条解答
技术淑霞
技术淑霞 Lv1
你这个问题我也踩过坑，直接说正解：在 .storybook/main.js 里配的 parameters 确实会全局生效，但前提是得确保没有被下层覆盖或格式写错。

你的 main.js 写法其实没错，但可能漏了关键点。先确认一下你用的是哪个版本的 Storybook？5 到 7 的配置方式有点区别。假设你现在是 v6 或以上（现在基本都是），正确做法如下：

在 .storybook/main.js 中这样写：

module.exports = {

  stories: ['../src/**/*.stories.@(js|mdx)'],

  addons: ['@storybook/addon-essentials'],

  core: { builder: 'webpack5' },

  parameters: {

    layout: 'fullscreen',

    docs: { inline: true },

    // 如果你还用了主题控制之类的，也可以在这里定义 globalTypes

    controls: { sort: 'requiredFirst' }

  },

  // 关键一步：globalTypes 要放顶层，不是嵌套在 parameters 里

  globalTypes: {

    theme: {

      name: 'Theme',

      description: 'Global theme for components',

      defaultValue: 'light',

      toolbar: {

        icon: 'circlehollow',

        items: [

          { value: 'light', title: 'Light' },

          { value: 'dark', title: 'Dark' }

        ]

      }

    }

  }

};


然后在任意 story 文件中就可以通过 globals 拿到 theme 值，不需要每个文件重复声明 parameters。

另外注意：如果你在某个 .stories.js 文件里写了 default export 并包含 parameters，那里的值会 合并 而不是完全覆盖全局的。比如你在单个 story 设置了 layout: 'centered'，它就会覆盖全局的 fullscreen。

调试看看：启动 Storybook 后打开一个组件，进 Canvas 或 Docs 标签页，检查布局是否默认全屏；再打开 Controls 面板，看看有没有出现你定义的 theme 切换工具栏。如果没有，说明 globalTypes 没注册成功，多半是拼写错了或者位置不对。

还有一个进阶办法是创建 .storybook/preview.js，把 parameters 放进去：

export const parameters = {

  layout: 'fullscreen',

  docs: { inline: true }

};



export const globalTypes = {

  theme: { ... }

};


这个 preview.js 就是专门用来给所有 stories 提供共享配置的，很多团队都这么拆分。main.js 管插件和路径，preview.js 管视觉参数，更清晰。

总结：main.js 或 preview.js 中正确导出 parameters 和 globalTypes，就能实现全局继承。别再每个 story 里重复写了，纯浪费时间。
点赞 4
2026-02-10 08:04
FSD-爱华
FSD-爱华 Lv1
你遇到的问题是想在所有stories间共享parameters，但在.main.js里直接加parameters是没用的，因为那属于配置层级不对。

正确做法是在.storybook/preview.js里统一设置默认参数，这个文件就是专门用来影响全局preview行为的。你可以这样写：

export const parameters = {

  layout: 'fullscreen',

  docs: { inline: true },

  // 其他你需要的默认配置

};


如果你还需要在某些stories里覆盖这些默认值，只需要在具体story里重新定义对应字段就行，它会自动合并配置，优先级也对。

至于你提到的globalTypes报错，那是因为你可能错误地在预设文件里用了不支持的字段，或者加载顺序有问题，但这个问题和当前需求无关。

总之记住一点：全局parameters就写在preview.js里，别往.main.js里塞。
点赞 4
2026-02-05 22:01
相关推荐
元素
元素
工具
博客
问答
登录/注册