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.

// before
import styled from 'styled-components'

// after
import 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.

/** @jsxImportSource theme-ui */

const Section = ({ width, color, bg, ...props }) => (
  <section
    {...props}
    sx={{
      width,
      color,
      bg,
      // additional styles...
    }}
  />
)