用我的 .mdx 文件替换 Storybook 的 DocsPage答案

【问题标题】：Replacing Storybook's DocsPage with my .mdx file用我的 .mdx 文件替换 Storybook 的 DocsPage
【发布时间】：2022-09-25 11:44:41
【问题描述】：

我想更改我的 Stories\' Docs 页面，因此当我单击 Canvas 时，它会显示 story.js 文件中的组件和道具，当我单击 Docs 时，它会显示我自制的 MDX 文件而不是自动生成的一。

这就是文档所说的：

页面参数如下所示：

parameters: {
  docs: {
    page: null
  }
}

我将它设置为空，所以现在它什么都不显示。有谁知道我应该给page 什么值来使用我的x.stories.mdx 命名文件？

【解决方案1】：

原始答案

我不确定通过更改参数中的内容它是如何工作的。

但我所做的是，这在 main.js 中：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // ...
};

然后只需在该位置添加x.stories.mdx：

import {Meta} from '@storybook/addon-docs';

<Meta title="Info/Toolbox"/> <!-- This notation creates a subtitle -->

Your documentation here ...

这就是我的docs 在参数中的样子：

docs: { inlineStories: true }

我发现您可以使用参数中的文档来更改例如组件和故事描述。例如。：

docs: {
  description: {
    component: 'Some component description',
    story: 'Some story description'
  }
}

但它是不打算设置 mdx 文件.

mdx 文件应该像我在原始答案中描述的那样被拾取。

我认为令人困惑的是你不能只为文档标签。您实际上使用 MDX 为画布和文档创建文档。

我最近制作了一个 MDX 版本，近似于我的一个项目中一个简单组件的自动生成文档，也许它可以帮助你。

你可以找到MDX代码here，和故事书服务器here。

【讨论】：

谢谢您的回答。我有相同的设置，我的 .mdx 文件显示正确。我试过docs: { inlineStories: true } 选项，但没有帮助。我还尝试给出docs.page 的相对路径，但它给了我一个错误。
@Mortenz 也许将该错误添加到您的问题中。我会尽力提供帮助。
所以我联系了故事书团队，有人告诉我，这个文档Replacing Storybook's DocsPage 有点误导，我应该改用MDX 的文档。所以基本上，我仍然不清楚如何设置 Canvas (story.js) + Docs (my .mdx) 设置。