mdx-components.js

Die Datei mdx-components.js|tsx ist erforderlich, um @next/mdx mit dem App Router zu verwenden, und funktioniert ohne sie nicht. Zusätzlich können Sie damit Stile anpassen.

Verwenden Sie die Datei mdx-components.tsx (oder .js) im Stammverzeichnis Ihres Projekts, um MDX-Komponenten zu definieren. Zum Beispiel auf der gleichen Ebene wie pages oder app, oder innerhalb von src, falls zutreffend.

import type { MDXComponents } from 'mdx/types'

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

Exporte

useMDXComponents Funktion

Die Datei muss eine einzelne Funktion exportieren, entweder als Standardexport oder benannt als useMDXComponents.

import type { MDXComponents } from 'mdx/types'

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

Parameter

components

Bei der Definition von MDX-Komponenten akzeptiert die Exportfunktion einen einzelnen Parameter, components. Dieser Parameter ist eine Instanz von MDXComponents.

• Der Schlüssel ist der Name des HTML-Elements, das überschrieben werden soll.
• Der Wert ist die Komponente, die stattdessen gerendert werden soll.

Gut zu wissen: Denken Sie daran, alle anderen Komponenten (d.h. ...components), die keine Überschreibungen haben, weiterzugeben.

Versionsverlauf