Package Exports

@theme-ui/mdx
@theme-ui/mdx/dist/theme-ui-mdx.cjs.js
@theme-ui/mdx/dist/theme-ui-mdx.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@theme-ui/mdx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@theme-ui/mdx

MDX utilities for Theme UI

https://theme-ui.com

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 { ThemeProvider, 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 (
    <ThemeProvider theme={theme}>
      <MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
    </ThemeProvider>
  )
}

`Themed`

Use the Themed components dict to render UI with styles from theme.styles outside of MDX. Useful for consistent styling in components meant for embedding in MDX.

For example, if you'd like to reuse heading styles in a React component, you can use the Themed.h1 component to render an <h1> element with styles from theme.styles.h1.

import type { ComponentPropsWithoutRef } from 'react'
import { Themed } from '@theme-ui/mdx'

const createHeadingWithLink =
  (Level: 'h2' | 'h3' | 'h4' | 'h5' | 'h6') =>
  (props: ComponentPropsWithoutRef<'h2'>) =>
    (
      <Level {...props}>
        {props.id && (
          <a
            href={`#${props.id}`}
            sx={{
              color: 'inherit',
              textDecoration: 'none',
              ':hover': {
                textDecoration: 'underline',
              },
            }}
          >
            {props.children}
          </a>
        )}
      </Level>
    )

export const components = {
  h2: createHeadingWithLink('h2'),
  h3: createHeadingWithLink('h3'),
  h4: createHeadingWithLink('h4'),
  h5: createHeadingWithLink('h5'),
  h6: createHeadingWithLink('h6'),
}

Other exports

themed
defaultMdxComponents