Components for MDX

MUI based components for MDX.

Basic usage

Directly

import Readme from '../contents/readme.mdx';
import { mdxComponents } from '@cieloazul310/gatsby-theme-aoi';

const yourShortcodes = {};

function Page() {
  return <Readme components={{ ...mdxComponents, ...yourShortcodes }} />;
}

With layout

import { MDXProvider } from '@mdx-js/react';
import { mdxComponents } from '@cieloazul310/gatsby-theme-aoi';

const yourShortcodes = {};

function MdxLayout({ children }) {
  return (
    <MDXProvider components={{ ...mdxComponents, ...yourShortcodes }}>
      {children}
    </MDXProvider>
  )
}

Reference

Next