@theme-ui/mdx
TypeScript icon, indicating that this package has built-in type declarations

0.16.2 • Public • Published

@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

Dependencies (2)

Dev Dependencies (8)

Package Sidebar

Install

npm i @theme-ui/mdx

Weekly Downloads

29,232

Version

0.16.2

License

MIT

Unpacked Size

34.2 kB

Total Files

24

Last publish

Collaborators

  • jxnblk
  • johno
  • hasparus
  • lachlanjc