storybook [Bug]:自定义MDX组件与JSDoc自动文档不兼容

kgsdhlau  于 6个月前  发布在  其他
关注(0)|答案(1)|浏览(54)

描述问题

根据这些文档,我已经配置了各种MDX组件,以便使用我们样式指南中的组件或其他方式显示(例如 p s、 h 标题、 code 片段等)。这对于直接用MDX编写的页面(即具有 .mdx 扩展名)有效,但它不影响从组件JSDocs自动生成的文档 Storybook。
我了解 MDXProvider 's components prop 的工作注意事项:“我们现在‘沙箱’化组件,这个名字不太好。这意味着当你传递一个组件给 h1 时,它确实会被用于 # hi ,但不会被用于 <h1>hi</h1> ”。
虽然JSDocs 技术上是用Markdown编写的,但我想知道它们是否在传递给 MDXProvider 之前被转换成原始HTML。🤔
这是Storybook的一个bug吗?还是我应该采用不同的方法,以便在自动文档页面上自定义JSDoc的部分呈现方式?

重现链接

https://stackblitz.com/edit/github-wxehxx

重现步骤

  1. 转到重现链接。
  2. 您应该到达应用程序的根目录 / 。请注意第一段文字是红色的。这是我如何配置 p 标签以使用 MDXProvider 和自定义 DocsContainer 在示例中呈现的方式。
  3. 转到“Button”故事的文档页面(即 /?path=/docs/example-button--docs )。
  4. 注意生成自 Button 's JSDoc的段落没有进行样式设置。

系统

Storybook Environment Info:

  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 9 PRO 7940HS w/ Radeon 780M Graphics
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.0.6 - ~/.nvm/versions/node/v18.20.2/bin/pnpm <----- active
  Browsers:
    Chrome: 125.0.6422.141
  npmPackages:
    @storybook/addon-essentials: ^8.1.5 => 8.1.5 
    @storybook/addon-interactions: ^8.1.5 => 8.1.5 
    @storybook/addon-links: ^8.1.5 => 8.1.5 
    @storybook/addon-mdx-gfm: ^8.1.5 => 8.1.5 
    @storybook/blocks: ^8.1.5 => 8.1.5 
    @storybook/manager-api: ^8.1.5 => 8.1.5 
    @storybook/preview-api: ^8.1.5 => 8.1.5 
    @storybook/react: ^8.1.5 => 8.1.5 
    @storybook/react-vite: ^8.1.5 => 8.1.5 
    @storybook/test: ^8.1.5 => 8.1.5 
    @storybook/theming: ^8.1.5 => 8.1.5 
    @storybook/types: ^8.1.5 => 8.1.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.1.5 => 8.1.5 
    storybook-dark-mode: ^4.0.1 => 4.0.1

其他上下文

  • 无响应*
f0brbegy

f0brbegy1#

MDX支持使用提供者替换组件的能力。默认的autodocs页面仅使用原始的React,没有这种能力。
您可以尝试使用MDX定义autodocs页面,这在技术上应该是可行的。我还没有尝试过这个:https://storybook.js.org/docs/writing-docs/autodocs#with-mdx

相关问题