Skip to content
Theme UI
GitHub

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>
)
}
Edit the page on GitHub
Previous:
Themed
Next:
Layout Components