如何为特定Story禁用Storybook Interactions插件？

可以通过Storybook的参数配置，轻松在单个或多个Story中禁用Interactions插件，逻辑和你使用Zeplin Addon的方式类似。

1. 单个Story禁用 #

在目标Story的parameters中添加interactions.enabled: false即可：

export const WithoutInteractions = {
  parameters: {
    interactions: { enabled: false },
  },
  // 你的Story渲染逻辑
};

2. 整个组件的所有Story禁用 #

如果需要禁用某个组件下的所有Story的Interactions，可在组件的默认导出中设置参数：

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    interactions: { enabled: false },
  },
};

3. 全局默认禁用，按需启用 #

若希望全局默认关闭Interactions，仅在特定Story中开启，可在.storybook/preview.js中配置全局参数：

// .storybook/preview.js
export const parameters = {
  interactions: { enabled: false },
};

之后在需要启用的Story中覆盖参数：

export const WithInteractions = {
  parameters: {
    interactions: { enabled: true },
  },
};

这个interactions.enabled参数是Interactions插件内置的控制逻辑，和你熟悉的Zeplin Addon禁用方式完全一致，能满足你仅在部分Story中使用插件的需求。

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