Skip to content
Theme UI
GitHub

Themed component

Use the Themed components dict to render UI with styles from theme.styles outside of MDX or inside of more complex 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'


export const components = {
  h2: (props: ComponentPropsWithoutRef<'h2'>) => (
    <h2 {...props}>
      {props.id ? (
        <Themed.a href={`#${props.id}`}>{props.children}</a>
      ) : (
        props.children
      )}
    </h2>
  ),
}


export const theme = {
  styles: {
    a: {
      textDecoration: 'none',
      ':hover': {
        textDecoration: 'underline',
      },
    },
  },
}

For a full list of keys available, see the Theme Specification docs.

Global Styles

To add base typographic styles to the <html> element, add styles to theme.styles.root. Previous versions of Theme UI used the Themed.root component. See the theming docs for more information.

Edit the page on GitHub
Previous:
MDX Components
Next:
Components