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 的實例。

• 鍵是要覆寫的 HTML 元素名稱。
• 值是要改為渲染的元件。

小訣竅：請記得傳遞所有其他沒有覆寫的元件（即 ...components）。

版本歷史