$ npm install theme-ui
WIP Themeable UI components for themes
npm i theme-ui
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
css
propThe css
utility is from @styled-system/css.
This could potentially be handled with something like Emotion plugins.
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>
Use the components
prop to add components to MDX scope.
The ThemeProvider
(name TBD) is a combination of MDXProvider
and Emotion's ThemeProvider
.
// with mdx components
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 documents with the components provided via context. For use outside of MDX (e.g. Remark Markdown) the styles could be applied with a wrapper component.
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.
// example theme
export default {
colors: {
primary: '#33e',
},
styles: {
// this styles child MDX `<h1>` components
h1: {
fontSize: 32,
// this value comes from the `color` object
color: 'primary',
},
}
}
These components' styles can also be consumed outside of an MDX doc with the Styled
component.
Note that these are only styled using the same theme.styles
object and not the same components passed to the ThemeProvider
context.
import React from 'react'
import { Styled } from 'theme-ui'
export default props =>
<Styled.wrapper>
<Styled.h1>
Hello
</Styled.h1>
</Styled.wrapper>
To change the underlying component in Styled
, use the as
prop.
<Styled.a as={Link} to='/'>Home</Styled.a>
Page layout components are included in the theme-ui/layout
module.
import React from 'react'
import {
Layout,
Header,
Main,
Container,
Footer
} from 'theme-ui/layout'
export default props =>
<Layout>
<Header>
Hello
</Header>
<Main>
<Container>
{props.children}
</Container>
</Main>
<Footer>
© 2019
</Footer>
</Layout>
MIT License
© 2010 - cnpmjs.org x YWFE | Home | YWFE