Skip to content
Branch: master
Find file History
Latest commit bf5ceeb Jun 24, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src Simplify build setup Jun 2, 2019
test Simplify build setup Jun 2, 2019
.npmignore Simplify build setup Jun 2, 2019
README.md move `jsx` into monorepo May 29, 2019
package.json v5.0.11 Jun 24, 2019

README.md

@styled-system/jsx

Custom JSX pragma for css prop with Styled System - built with Emotion

/** @jsx jsx */
import jsx from '@styled-system/jsx'

export default props =>
  <div
    {...props}
    css={{
      fontSize: 32,
      // use theme values
      color: 'primary',
      // responsive arrays
      padding: [ 2, 3, 4 ],
      // use shorthands
      mx: 'auto',
    }}
  />
  • Use Styled System seamlessly with the css prop
  • No custom styled HOC API required
  • Mix with any CSS property
  • Pick up theme values for anything
  • Apply any CSS property responsively with array props

Getting Started

If you're already using JSX syntax, the most explicit way to use Styled System JSX is by adding a custom pragma to the top of any module that uses the pragma.

/** @jsx jsx */
import jsx from '@styled-system/jsx'

This is similar to what the Emotion plugin does, so the Emotion plugin should be disabled when using this one instead.

For any module with the custom pragma enabled, use Styled System shortcuts, responsive arrays and theme values directly in the css prop.

<div
  css={{
    px: 3,
    py: 4,
    mb: 4,
    bg: 'primary'
  }}
/>

To use explicit values instead of referencing values from the theme, use a value that will not be interpreted as an object key. For example, use 2px instead of 2 (which would pick up the space[2] value.

<div css={{ mb: '2px' }} />

Styled Components

To create reusable styled components, wrap an element like so.

/** @jsx jsx */
import jsx from '@styled-system/jsx'

export const Button = ({
  primary,
  ...props
}) =>
  <button
    {...props}
    css={{
      color: 'white',
      bg: primary ? 'primary' : 'secondary',
    }}
  />

Differences from core Styled System

  • No width fractions
  • No need to define custom style functions
  • No responsive object syntax (this would get messy with nested styles)

MIT License

You can’t perform that action at this time.