如何在 Storybook 5 中设置网格单元格大小？

Question

我正在使用 Storybook v5.2.6 并且正在尝试更改我的故事中显示的网格线的大小。

添加 @storybook/addon-backgrounds 后，我的 Storybook 工具栏中出现了一个切换网格按钮。单击按钮绘制一个 20px 的网格：

我想将网格大小全局更改为 8px，我尝试了以下操作：

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

const storyBookTheme = create({
  gridCellSize: 8,
  grid: { cellSize: 8 }, // alternative approach
  brandTitle: 'Hello, World!',
});

addParameters({
  options: {
    theme: storyBookTheme,
  },
  ...
});

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

我无法找到任何关于如何在全局范围内使用此参数的文档，但这似乎是正确的方法，因为：

在 Storybook 'Kitchen Sink' 存储库中，the gridCellSize parameter is set like this, along with other theme variables。
作者在PR #6252中修改为"Pick up gridCellSize from Theme configuration options"

所以我认为我的上述尝试会奏效，但是仍然绘制了一个 20px 的网格。

在 Storybook 5.2.0-alpha.43 的发行说明中，他们提到了重大更改：

"Move grid toolbar feature to background-addon".

但是，没有迁移说明

那么，问题来了，如何设置网格单元格大小？

更新

我已经升级到 Storybook 5.3.0-beta.19，现在可以逐个故事设置网格大小，但我仍然无法全局设置。

Button.story = {
  parameters: {
    grid: { cellSize: 8 },
  },
};

Answer 1

尝试各种排列后，我偶然发现了正确的配置。

这适用于 Storybook 5.3.0-beta.19。我不确定早期版本。

而不是在主题中设置gridCellSize参数，您需要在配置参数中添加grid: { cellSize: 8 }。在您的 config.js 文件中，执行以下操作：

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

const storyBookTheme = create({
  brandTitle: 'Hello, World!',
});

addParameters({
  grid: { cellSize: 8 }
  options: {
    theme: storyBookTheme,
  },
  ...
});

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

如何在 Storybook 5 中设置网格单元格大小？

How do I set the grid cell size in Storybook 5?

storybook

更新