Global MDX components

[lpalazzi]

Is there a way to define a components mapping object that is then applied to all MDX routes? The only way to apply components to an MDX module is to pass it as a prop, for example:

import MDXComponent from './component.mdx';
import { P } from './components';

export default <MDXComponent components={{p: P}} />

However, if I want to use an MDX file as a route, I'm not actually calling the component anywhere so I can't pass any props.

Is there a way to do this globally?

[huijiewei]

use @mdx-js/react

layout code:

<MDXProvider disableParentContext components={components}>
  <Suspense fallback={null}>
    <Outlet />
  </Suspense>
</MDXProvider>

[lpalazzi]

I've tried this, doesn't seem to work.

Here is my example:

/app/routes/posts.tsx

import { Outlet } from '@remix-run/react';
import { MDXProvider } from '@mdx-js/react';
import { Suspense } from 'react';

export default function Index() {
  return (
    <div className='mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8'>
      <MDXProvider
        disableParentContext
        components={{
          p: (props) => <p {...props} className='text-red-900' />,
          h1: (props) => <h1 {...props} className='text-3xl text-blue-900' />,
          h2: (props) => <h2 {...props} className='text-xl text-green-900' />,
        }}
      >
        <Suspense fallback={null}>
          <Outlet />
        </Suspense>
      </MDXProvider>
    </div>
  );
}

/app/routes/posts.test.mdx

# H1 Title

## H2 Title

This is a paragraph

This is what is shown at the /posts/test route:

Clearly the component mapping isn't being applied as expected. But when I import the file as a module and apply the same component mapping it works:

import Test from './posts.test.mdx';

export default function Index() {
  return (
    <div className='mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8'>
      <Test
        components={{
          p: (props) => <p {...props} className='text-red-900' />,
          h1: (props) => <h1 {...props} className='text-3xl text-blue-900' />,
          h2: (props) => <h2 {...props} className='text-xl text-green-900' />,
        }}
      />
    </div>
  );
}

[huijiewei]

Have you set the mdx plugin's configuration providerImportSource to @mdx-js/react

[lpalazzi]

No the remix docs for MDX don't say anything about this and not sure where to find that config

[huijiewei]

sorry. I use remix + vite, the mdx plugin can be used alone, have more flexibility.

[Sridatta19]

All that you need to do is making this change in vite.config.ts for component substitution to work in remix+mdx+vite

mdx({
    providerImportSource: '@mdx-js/react',
}),

Now in blog layout you can simply pass <MDXProvider components={components}>

const components = {
	h1: H1,
	code: Code,
	link: Link,
}