我想要实现的目标
我正在寻找减少我们在Chromatic中快照和测试的故事数量的选项(目前接近400个(。我们将故事书用于我们的设计系统，也用于Chromatic的视觉测试。
目前，我们的故事大致结构为一个组件的每一组状态/主要变体的故事。例如，我们的按钮有：
- 尺码-sm、m、l，响应灵敏
- 颜色-主要、次要、危险等
- 布局-左图标，右图标
- 游乐场-一个包含单个按钮的故事，您可以在其中与所有各种输入进行交互。游乐场故事已经被排除在Chromatic之外
我正考虑添加一个"；视觉测试"；故事到每个组件，该组件将在单个画布上具有按钮的每个变体；视觉测试"；彩色测试中的故事。在按钮示例中，这将把按钮快照从3减少到1，并且我们还有其他组件的变化远不止于此。
我找到的最好的解决方案是创建一个文档页面，我真的很喜欢使用MDX来编写一个包含多个故事的页面
<Story id="some-component--some-name" />
<Story id="some-component--some-other-name" />
MDX文档
问题
到目前为止，我无论如何都找不到让chromatic拍摄文档或纯文档页面的快照。我曾尝试将文档作为故事书中的默认视图，甚至将画布选项卡完全隐藏在故事书中，但Chromatic似乎必须使用自己的配置来解析和渲染故事。
问题
有没有一种方法可以强制color拍摄文档页面的快照，或者更好的"；纯文档"；MDX页面(如MDX文档中所述(
或者如果有人对创建由其他故事组成的故事有任何其他建议，这也可能是我问题的解决方案。
目前，我看到的唯一选择是复制故事，这并不理想。
您可以在禁用所有快照/storybook/preview.js然后您可以为单个故事启用它。我只是不知道如何使用MDX(这也是我的情况(来实现这一点
更新：我想以下内容对MDX起到了作用(如果你从preview.js禁用所有功能，那么就通过{ disableSnapshot: false }(
<Story name="StoryName" args={{
chromatic: { disableSnapshot: true }
}}>...</Story>
``
Ref: https://www.chromatic.com/docs/ignoring-elements#ignore-stories
最终的解决方案是一个名为Variants的附加组件。默认情况下，您可以忽略Chromatic中的所有故事，只拍摄使用Varitants插件在单个页面上显示每个变体的故事的快照。
故事书插件变体