Styled Components

If you're already using the styled API from the @emotion/styled package, those components should have access to the same theming context that Theme UI uses. Instead of using the ThemeProvider component from emotion-theming, you can import and use the Theme UI provider.

/** @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, we're looking into integrations for existing components, but 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

To avoid the need for an additional dependency, you can use the sx prop to create custom styled components.

/** @jsxImportSource theme-ui */
export default ({ width, color, bg, ...props }) => (
  <div
    {...props}
    sx={{
      width,
      color,
      bg,
      // additional styles...
    }}
  />
)