mdx-components.js
mdx-components.js|tsx 文件对于在 App Router 中使用 @next/mdx 来说是必需的，没有它将无法正常工作。此外，你还可以使用它来自定义样式。
在项目根目录中使用 mdx-components.tsx (或 .js) 文件来定义 MDX 组件。例如，将其放在与 pages 或 app 目录同级的位置，或者如果适用的话，放在 src 目录内。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}mdx-components.js
export function useMDXComponents(components) {
return {
...components,
}
}导出
useMDXComponents 函数
该文件必须导出一个单一的函数，可以是默认导出或命名为 useMDXComponents。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}mdx-components.js
export function useMDXComponents(components) {
return {
...components,
}
}参数
components
在定义 MDX 组件时，导出函数接受一个名为 components 的参数。这个参数是 MDXComponents 的一个实例。
- 键是要覆盖的 HTML 元素的名称。
- 值是要替代渲染的组件。
值得注意的是：记得传递所有其他没有被覆盖的组件 (即
...components)。
版本历史
| 版本 | 变更 |
|---|---|
v13.1.2 | 添加了 MDX 组件 |