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
The css
utility is from @styled-system/css.
import React from 'react'
import { css } from 'theme-ui'
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.
The ThemeProvider
(name TBD) is a combination of MDXProvider
and Emotion's ThemeProvider
– see emotion-mdx.
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.wrapper>
<Styled.h1>
Hello
</Styled.h1>
</Styled.wrapper>
theme.styles
The MDX components can also be styled via the theme.styles
object.
This can be used as a mechanism to pass Typography.js-like styles to MDX content.
export default {
colors: {
primary: '#33e',
},
styles: {
h1: {
fontSize: 32,
color: 'primary',
},
}
}