mdx-components.js File

The mdx-components file is required, you use it to customize styles via useMDXComponents function.

Exports

useMDXComponents function

The file must export a single function named useMDXComponents.

import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs' // nextra-theme-blog or your custom theme
 
// Get the default MDX components
const themeComponents = getThemeComponents()
 
// Merge components
export function useMDXComponents(components) {
  return {
    ...themeComponents,
    ...components
  }
}

Params

components

When defining MDX Components, the export function accepts a single parameter components: MDXComponents.

• The key is the name of the HTML element to override.
• The value is the component to render instead.