@charlietango/emotion-sx
v1.0.1
Published
JSX pragma for Emotion SX prop
Downloads
5
Readme
@charlietango/emotion-sx
Using sx
prop
Normally when running emotion through Babel you can use the css
prop -
this allows you to write the tagged template or Object styling directly on the components. It's then
converted into a style and className
by Babel.
We extend this setup by adding support for @styled-system/css under
a new sx
props. This allows us to consume the theme and add responsive values with arrays. This is
done by creating a custom JSX Pragma that adds support for the sx
prop on all React elements.
const Example = () => (
<div
sx={{
color: 'red',
px: [3, 6],
}}
/>
);
Make sure @charlie-tango/babel-preset-sx-prop is installed, otherwise the
sx
prop will not do anything.
Custom JSX pragma
If you can't add
@charlie-tango/babel-preset-sx-prop to the
project, you can still use the sx
prop by defining a custom JSX Pragma in the React file.
Include this at the top of the file:
/** @jsx jsx */
import { jsx } from '@charlietango/emotion-sx';
This replaces the normal import * as React from 'react'
(which imports the default JSX from
React).
Base CSS
The library includes a <BaseCss />
Global styles file - It's built on top of
sanitize.css, with some of our settings included.
import { ThemeProvider } from '@emotion/react';
import { BaseCss, baseTheme } from '@charlietango/ui';
const App = () => (
<ThemeProvider theme={baseTheme}>
<BaseCss />
<App />
</ThemeProvider>
);
In addition to this, it also extracts a few values (if set) from the theme, and defines as global defaults.
html {
background-color: 'theme.colors.background';
color: 'theme.colors.text';
font-family: 'theme.fonts.body';
}