如何在Storybook 5中全局设置网格单元格尺寸？

在Storybook 5.2将网格功能迁移到@storybook/addon-backgrounds之后，全局网格的配置方式确实发生了变化——它不再属于主题配置的一部分，而是需要直接作为addon的参数全局设置。

你升级到5.3.0-beta.19后，只需要把grid参数从主题配置中移出来，直接放到addParameters的根层级即可实现全局生效：

import { configure, addParameters } from '@storybook/react';
import { create } from '@storybook/theming/create';

const storyBookTheme = create({
  brandTitle: 'Hello, World!',
  // 这里不再需要grid相关的配置项
});

addParameters({
  // 全局网格配置直接放在这里
  grid: {
    cellSize: 8,
    // 可选：还可以添加其他网格属性，比如透明度、单元格数量等
    // opacity: 0.5,
    // cellAmount: 5
  },
  options: {
    theme: storyBookTheme,
  },
  // 你的其他参数配置...
});

configure(require.context('../stories', true, /\.stories\.js$/), module);

为什么之前的主题配置不生效？ #

• 5.2版本的破坏性变更说明里提到“将网格工具栏功能移至background-addon”，这意味着网格的配置逻辑从主题系统剥离，变成了@storybook/addon-backgrounds的独立参数。
• 你之前参考的Kitchen Sink仓库和PR #6252里的gridCellSize配置，都是功能迁移前的旧方案，只适用于5.2之前的版本。

现在这样配置后，所有故事都会默认使用8px的网格尺寸，同时你依然可以在单个故事的parameters里覆盖这个全局配置，保持灵活性。

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