Styled Components
Theme UI itself doesn’t expose an API for styled components, but works seamlessly with
the styled
API from the @emotion/styled package. Components written with it
should have access to the same theming context that Theme UI uses.
Instead of using the ThemeProvider
component from @emotion/react
,
import and use the Theme UI provider at your app’s root level.
/** @jsxImportSource theme-ui */import { ThemeProvider } from 'theme-ui'import theme from './theme'import SomeComponent from './SomeComponent'export default (props) => (<ThemeProvider theme={theme}><SomeComponent /></ThemeProvider>)
If you’re using the Styled Components library, these can usually be converted to use Emotion
with a single line change to the import
statement.
// beforeimport styled from 'styled-components'
// afterimport styled from '@emotion/styled'
Using the sx
prop
Theme UI is actively working on removing its internal dependency on @emotion/styled
to reduce bundle size.
While Styled Components made with the package will continue to work into the future, we recommend using the
sx
prop instead for simpler styling with object styles.
Edit the page on GitHub/** @jsxImportSource theme-ui */const Section = ({ width, color, bg, ...props }) => (<section{...props}sx={{width,color,bg,// additional styles...}}/>)