Use with emotion

xstyled has complete support of emotion.

Installation

To download xstyled run:

npm install @xstyled/emotion @emotion/core @emotion/styled emotion-theming

System as props

You can create your own system components with emotion:

import styled from 'emotion-styled'
import { system } from '@xstyled/system'
const Box = styled.div(system)

System as getters

System as getters are also available for emotion styled components.

import styled from 'emotion-styled'
import { th } from '@xstyled/system'
const Box = styled.div`
background-color: ${th.color('primary')};
`

System as styled

System can also be used seamlessly in your CSS. @xstyled/emotion is a wrapper around @emotion/styled that gives you this power:

import styled from '@xstyled/emotion'
const PrimaryBox = styled.div`
width: 200px;
height: 200px;
background-color: primary;
`

The above example reads primary from theme.colors.

Use css prop

xstyled also support emotion css property. The only thing you have to is importing jsx and css from @xstyled/emotion. See emotion documentation.

/** @jsx jsx */
import { jsx, css } from '@xstyled/emotion'
function PrimaryBox() {
return (
<div
css={css`
width: 200px;
height: 200px;
background-color: primary;
`}
/>
)
}

The above example reads primary from theme.colors.

Babel preset

To avoid the /** @jsx jsx */ you can use @xstyled/babel-preset-emotion-css-prop. It has the same interface as @emotion/babel-preset-css-prop, see emotion documentation.

.babelrc

{
"presets": ["@xstyled/babel-preset-emotion-css-prop"]
}