Skip to content
Theme UI
GitHub

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...
}}
/>
)
Edit the page on GitHub
Previous:
Keyframes
Next:
MDX Layout Components