Skip to content
Theme UI
GitHub

MDX Layout Components

The ThemeProvider component can be nested within a parent ThemeProvider, allowing you to contextually adjust styles in certain parts of a UI. This functionality can be leveraged to create custom layout components that take MDX content as children to create uniquely styled blocks of content. For example, this site's landing page uses this approach to style its content, which is written in MDX.

As an example, create a new component with the ThemeProvider and a wrapping <div>.

/** @jsxImportSource theme-ui */
import { ThemeProvider } from 'theme-ui'
export default (props) => (
<ThemeProvider theme={{}}>
<div {...props} />
</ThemeProvider>
)

To add styles to this component, augment the required theme prop and add an sx prop to the div.

InvertedBanner.js
/** @jsxImportSource theme-ui */
import { ThemeProvider } from 'theme-ui'
const InvertedBanner = (props) => (
<ThemeProvider
theme={{
styles: {
// style child elements
h1: {
fontSize: [5, 6, 7],
},
},
}}
>
<div
{...props}
sx={{
// swap colors for an inverted effect
color: 'background',
bg: 'primary',
px: 3,
py: 4,
}}
/>
</ThemeProvider>
)
export default InvertedBanner

The component above can then be imported and used within an MDX document.

import InvertedBanner from './InvertedBanner'
<InvertedBanner>
# Hello
This section has custom styles
</InvertedBanner>
This part of the document uses default styles
Edit the page on GitHub
Previous:
Custom Components
Next:
Syntax Highlighting