Skip to main content

mdx-components.js

使用 带有应用路由的 @next/mdx 需要 mdx-components.js|tsx 文件，没有它就无法工作。此外，你还可以将其用于 定制样式。

¥The mdx-components.js|tsx file is required to use @next/mdx with App Router and will not work without it. Additionally, you can use it to customize styles.

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

¥Use the file mdx-components.tsx (or .js) in the root of your project to define MDX Components. For example, at the same level as pages or app, or inside src if applicable.

import type { MDXComponents } from 'mdx/types'

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

导出​

¥Exports

useMDXComponents 功能​

¥useMDXComponents function

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

¥The file must export a single function, either as a default export or named useMDXComponents.

import type { MDXComponents } from 'mdx/types'

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

参数​

¥Params

components​

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

¥When defining MDX Components, the export function accepts a single parameter, components. This parameter is an instance of MDXComponents.

  • 键是要覆盖的 HTML 元素的名称。

    ¥The key is the name of the HTML element to override.

  • 该值是要渲染的组件。

    ¥The value is the component to render instead.

很高兴知道：请记住传递没有覆盖的所有其他组件（即 ...components）。

¥Good to know: Remember to pass all other components (i.e. ...components) that do not have overrides.

版本历史​

¥Version History

版本变化
v13.1.2添加了 MDX 组件