Skip to content
Theme UI
GitHub

@theme-ui/mdx

MDX utilities for Theme UI

npm i @theme-ui/mdx

API

useThemedStylesWithMdx

Wraps an object of components provided to MDXProvider with styles from theme.styles.

Example usage:

import {
MDXProvider,
useMDXComponents,
Components as MDXComponents,
MergeComponents as MergeMDXComponents,
} from '@mdx-js/react'
import { useThemedStylesWithMdx } from '@theme-ui/mdx'
import { ThemeUIProvider, Theme } from 'theme-ui'
interface MyProviderProps {
theme: Theme
components?: MDXComponents | MergeMDXComponents
children: React.ReactNode
}
function MyProvider({ theme, components, children }: MyProviderProps) {
const componentsWithStyles = useThemedStylesWithMdx(
useMDXComponents(components)
)
return (
<ThemeUIProvider theme={theme}>
<MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
</ThemeUIProvider>
)
}

Themed

Use the Themed components dictionary to render UI with styles from theme.styles outside of MDX. These are primarily meant as a mechanism to use styles defined in a theme object outside of MDX, which can then be embedded in JSX>

// picks up styles from `theme.styles.h1`
<Themed.h1 />

If you’re looking to automatically hyperlink headings in MDX, check out the linked headings guide.)


Other exports

  • themed
  • defaultMdxComponents
Edit the page on GitHub
Previous:
@theme-ui/components
Next:
@theme-ui/global