ملف mdx-components.js

ملف mdx-components.js|tsx مطلوب لاستخدام @next/mdx مع App Router ولن يعمل بدونه. بالإضافة إلى ذلك، يمكنك استخدامه لتخصيص الأنماط.

استخدم ملف mdx-components.tsx (أو .js) في جذر مشروعك لتعريف مكونات MDX. على سبيل المثال، في نفس مستوى pages أو app، أو داخل src إذا كان ذلك مناسبًا.

import type { MDXComponents } from 'mdx/types'

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

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

التصديرات

دالة useMDXComponents

يجب أن يصدر الملف دالة واحدة، إما كتصدير افتراضي أو باسم useMDXComponents.

import type { MDXComponents } from 'mdx/types'

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

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

المعاملات

components

عند تعريف مكونات MDX، تقبل الدالة المصدرة معاملًا واحدًا، وهو components. هذا المعامل هو نسخة من MDXComponents.

• المفتاح هو اسم عنصر HTML الذي تريد تجاوزه.
• القيمة هي المكون الذي تريد عرضه بدلاً منه.

معلومة مفيدة: تذكر تمرير جميع المكونات الأخرى (أي ...components) التي لا تحتوي على تجاوزات.

سجل الإصدارات