system-ui@theme-ui/mdx
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
themeddefaultMdxComponents