This guide covers breaking changes and new features when upgrading from Theme UI v0.14 to v0.15.
MDX is Now Opt-In
MDX is no longer included by default in Theme UI. If you’re using MDX, you’ll need to set it up manually.
Themed, you shouldn’t need to change anything.
This change enables you to use Theme UI together with MDX v2.
MDXProvider Removed from ThemeProvider
MDXProvider is no longer included in Theme UI’s ThemeProvider, and has been removed in favor of a useThemedStylesWithMdx hook.
Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.
Before:
import { ThemeProvider } from 'theme-ui'
function App() {
return (
<ThemeProvider theme={theme}>
{/* MDX components automatically styled */}
</ThemeProvider>
)
}
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 Export Moved
Themed components dict and other exports from @theme-ui/mdx are no longer reexported from theme-ui.
@theme-ui/mdx instead.
Before:
import { Themed } from 'theme-ui'
import { Themed } from '@theme-ui/mdx'
Themed Object is No Longer a Component
The Themed object itself is no longer a component. Previously, it was an alias for Themed.div.
<Themed /> with <Themed.div />.
Before:
After:
<Themed.div>Content</Themed.div>
Summary of Changes
If you’re using MDX with Theme UI v0.15:
- Install
@mdx-js/react if not already installed
- Create a custom provider using
useThemedStylesWithMdx
- Update imports of
Themed from theme-ui to @theme-ui/mdx
- Replace
<Themed /> with <Themed.div />
If you’re not using MDX, no changes are required. 