mdx-components.js

要配合 App Router 使用 @next/mdx，mdx-components.js|tsx 文件是必需的，没有它将无法工作。此外，你还可以用它来自定义样式。

在项目根目录下使用 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 的一个实例。

• 键 (key) 是要覆盖的 HTML 元素名称
• 值 (value) 是要渲染的替代组件

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

版本历史