mdx-components.js

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

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

TypeScript

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

JavaScript

mdx-components.js

export function useMDXComponents(components) {
  return {
    ...components,
  }
}

导出

useMDXComponents 函数

文件必须导出单个函数，作为默认导出或命名为 useMDXComponents。

TypeScript

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

JavaScript

mdx-components.js

export function useMDXComponents(components) {
  return {
    ...components,
  }
}

参数

components

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

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

提示：记住传递所有没有覆盖的其他组件（即 ...components）。

版本历史

版本	变更
v13.1.2	添加 MDX 组件