如何在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);

我尚未找到有关如何全局使用此参数的任何文档，但这似乎是正确的方法，因为：

1. 在故事书“厨房水槽”存储库中，the gridCellSize parameter is set like this, along with other theme variables。
2. 作者在PR #6252中更改为“从主题配置选项中提取gridCellSize”

所以我认为我的上述尝试会起作用，但是仍然绘制20px的网格。

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

  

“将网格工具栏功能移动到后台附件”。

但是，没有迁移说明

所以，问题是，如何设置网格单元格大小？

更新

我已经升级到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);