#MDX and React components

#Componentization

In MDX, all .mdx files are compiled into React components, which means they can be used as React components and can freely use React components. For example:

import MdxFragment from './_mdx-fragment.mdx';
import TsxComponent from './_tsx-component';

Testing the use of MDX fragments and React components.

<MdxFragment />

<TsxComponent />

It will be rendered as:

You can use built-in components provided by Rspress or install some React component libraries to enrich your documentation in .mdx files.

#Routing convention

In the docs directory, MDX fragments or React components need to be excluded from routing through the route.exclude configuration. For convenience, we agree that files starting with "_" will be excluded by default.

You can also place components in adjacent directories outside the docs directory, for example:

import ButtonFragment from './_button.mdx';

<ButtonFragment />
<Button />

It will be rendered as:

#Escape Hatch: using MDX styles in TSX components

import { getCustomMDXComponent } from '@theme';

export default () => {
  const { code: Code, p: P } = getCustomMDXComponent();
  return (
    <P>
      This is content in tsx, but you can use <Code>code block</Code> styles.
    </P>
  );
};

It will be rendered as: