描述问题
根据这些文档,我已经配置了各种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
重现步骤
- 转到重现链接。
- 您应该到达应用程序的根目录
/
。请注意第一段文字是红色的。这是我如何配置p
标签以使用MDXProvider
和自定义DocsContainer
在示例中呈现的方式。 - 转到“Button”故事的文档页面(即
/?path=/docs/example-button--docs
)。 - 注意生成自
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
其他上下文
- 无响应*
1条答案
按热度按时间f0brbegy1#
MDX支持使用提供者替换组件的能力。默认的autodocs页面仅使用原始的React,没有这种能力。
您可以尝试使用MDX定义autodocs页面,这在技术上应该是可行的。我还没有尝试过这个:https://storybook.js.org/docs/writing-docs/autodocs#with-mdx