@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: Themecomponents?: MDXComponents | MergeMDXComponentschildren: 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