getCustomMDXComponent

Warning

该组件主要配合自定义主题中的 wrap/eject 使用，与 MDX 里直接导入使用的组件不同，你可以通过传递组件 props 或直接覆盖该组件达到修改样式和功能的目的。如果通过 eject 覆盖整个组件，需注意组件对应配置项的读取会失效，需要自行控制。

getCustomMDXComponent 用于返回 Rspress 文档布局中渲染原生 Markdown 和 MDX 元素的默认组件。当你需要覆盖标题、链接、代码块、图片、表格等文档元素的渲染方式时，可以在自定义主题中使用它。

用法

在自定义主题中从 @rspress/core/theme-original 导入原始的 getCustomMDXComponent，然后导出一个同名函数：

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';

导出的 getCustomMDXComponent 会替换站点默认实现。Rspress 渲染文档内容时，会调用这个函数，并把返回的组件映射传给 MDX。上面的示例会保留默认 H1 渲染，并在每个 H1 下方额外渲染一段 below h1。

#getCustomMDXComponent

#用法

getCustomMDXComponent

用法