mdx-components.js
使用 App Router 时,必须使用 mdx-components.js|tsx
文件才能使用 @next/mdx
,否则将无法工作。此外,您可以使用它来自定义样式。
在项目的根目录中使用 mdx-components.tsx
(或 .js
) 文件来定义 MDX 组件。例如,与 pages
或 app
同级,或者在 src
内部(如果适用)。
mdx-components.tsx
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}
导出
useMDXComponents
函数
该文件必须导出一个函数,可以是默认导出或命名为 useMDXComponents
。
mdx-components.tsx
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}
参数
components
在定义 MDX 组件时,导出函数接受一个参数 components
。此参数是 MDXComponents
的实例。
- 键是要覆盖的 HTML 元素的名称。
- 值是要渲染的组件。
须知:请记住传递所有其他没有被覆盖的组件(即
...components
)。
版本历史
版本 | 变更 |
---|---|
v13.1.2 | 添加了 MDX 组件 |
了解更多关于 MDX 组件的信息
此页内容对您有帮助吗?