mdx-components.js

使用 App Router 时，必须使用 mdx-components.js|tsx 文件才能使用 @next/mdx，否则将无法工作。此外，您可以使用它来自定义样式。

在项目的根目录中使用 mdx-components.tsx (或 .js) 文件来定义 MDX 组件。例如，与 pages 或 app 同级，或者在 src 内部（如果适用）。

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

导出

useMDXComponents 函数

该文件必须导出一个函数，可以是默认导出或命名为 useMDXComponents。

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

参数

components

在定义 MDX 组件时，导出函数接受一个参数 components。此参数是 MDXComponents 的实例。

• 键是要覆盖的 HTML 元素的名称。
• 值是要渲染的组件。

须知：请记住传递所有其他没有被覆盖的组件（即 ...components）。

版本历史