theme-ui
Themeable UI components for themes
npm i theme-ui
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
css
prop
import React from 'react'
import css from '@styled-system/css'
export default () =>
<div
css={css({
fontSize: 4,
fontWeight: 'bold',
color: 'primary', // picks up values from theme
})}>
Hello
</div>
MDX Components
Use the components
prop to add components to MDX scope.
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import mdxComponents from './mdx-components'
import theme from './theme'
export default props =>
<ThemeProvider
components={mdxComponents}
theme={theme}>
{props.children}
</ThemeProvider>
This will render child MDX components with the components provided via context.
Styled components
These components can also be consumed outside of an MDX doc with the Styled
component.
import React from 'react'
import { Styled } from 'theme-ui'
export default props =>
<Styled.div>
<Styled.h1>
Hello
</Styled.h1>
</Styled.div>
theme.styles
The MDX components can also be styled via the theme.styles
object.
export default {
colors: {
primary: '#33e',
},
styles: {
h1: {
fontSize: 32,
color: 'primary',
},
}
}
Typography.js
The output of Typography.js can be added to the theme.styles
object to style MDX content.
See the Demo Page