@xstyled/emotion
v3.8.1
Published
A utility-first CSS-in-JS framework built for React (Emotion bindings).
Downloads
11,944
Readme
npm install @xstyled/emotion @emotion/react @emotion/styled
Docs
See the documentation at xstyled.dev for more information about using xstyled!
Quicklinks to some of the most-visited pages:
Example
import { x } from '@xstyled/emotion'
function Example() {
return (
<x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
<x.div flexShrink={0}>
<x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
</x.div>
<x.div>
<x.h4
fontSize={{ _: 'md', lg: 'xl' }}
fontWeight="medium"
color="black"
>
xstyled
</x.h4>
<x.p color="gray-500">A CSS-in-JS framework built for React.</x.p>
</x.div>
</x.div>
)
}
License
Licensed under the MIT License, Copyright © 2019-present Greg Bergé.
See LICENSE for more information.