@theme-ui/mdx

MDX utilities for Theme UI

``sh
npm i @theme-ui/mdx
`

API

$3

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

Example usage:

`tsx
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 (

{children}

)
}
`

$3

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>

`jsx
// picks up styles from theme.styles.h1

`

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

---

Other exports

- themed
- defaultMdxComponents`