close
Rspress
  • English

      • getCustomMDXComponent

      Warning

      This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

      getCustomMDXComponent returns the default components used by the Rspress doc layout to render native Markdown and MDX elements. Use it from a custom theme when you need to override how headings, links, code blocks, images, tables, and other document elements are rendered.

      Usage

      Import getCustomMDXComponent from @rspress/core/theme-original in your custom theme, then export a new function with the same name:

      theme/index.tsx
      import { getCustomMDXComponent as getBasicCustomMDXComponent } from '@rspress/core/theme-original';

function getCustomMDXComponent() {
  const mdxComponents = getBasicCustomMDXComponent();
  const { h1: H1, p: P } = mdxComponents;

  return {
    ...mdxComponents,
    h1: props => (
      <>
        <H1 {...props} />
        <P>below h1</P>
      </>
    ),
  };
}

export { getCustomMDXComponent };
export * from '@rspress/core/theme-original';

      The exported getCustomMDXComponent will replace the default one for the site. Rspress will call it when rendering doc content and pass the returned component map to MDX. In the example above, every H1 keeps the default renderer and gets an extra paragraph below it.