Custom MDX Components

To enrich components you’re passing to MDX context with styles defined in theme.styles, use useThemedStylesWithMdx with your MDXProvider.

import { MDXProvider, useMDXComponents, MDXComponents } from '@mdx-js/react'
import { useThemedStylesWithMdx } from '@theme-ui/mdx'
import type { ComponentPropsWithoutRef, ReactNode } from 'react'
import { ThemeUIProvider } from 'theme-ui'
import { h2, Note, TweetEmbed } from './components'

const components: MDXComponents = {
  h2,
  Note,
  TweetEmbed,
}

const theme = {
  styles: {
    h2: {
      fontWeight: 700,
    },
  },
}

function Provider({ children }: { children: React.ReactNode }) {
  const componentsWithStyles = useThemedStylesWithMdx(
    useMDXComponents(components)
  )

  return (
    <ThemeUIProvider theme={theme}>
      <MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
    </ThemeUIProvider>
  )
}