Skip to content

NextJS中文文档 - Mdx Components

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

使用项目根目录中的 mdx-components.tsx(或 .js)文件定义 MDX 组件。例如,与 pagesapp 在同一级别,或者如果适用的话,放在 src 内部。

tsx
import type { MDXComponents } from 'mdx/types'

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

导出

useMDXComponents 函数

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

tsx
import type { MDXComponents } from 'mdx/types'

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

参数

components

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

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

须知:记得传递所有其他没有覆盖的组件(即 ...components)。

版本历史

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

🎉有任何问题,欢迎联系我

WeChat QR Code
WeChat
QQ QR Code
QQ

赣ICP备2023003243号