Styled System with styled-jsx

Styled System is an excellent alternative to writing ad-hoc style declarations in your React components. By giving components standardized props like bg and fontSize, it's easier to build custom UI that respects your system constraints. That's because you can quickly specify your design tokens and use them in real code:

// theme.js
colors: {
  blue: '#0070F3'
}

// your React code
<Box color="blue" />

Styled System's responsive syntax is impressively concise, too:

// 16px on mobile, 14px on tablet, 12px on desktop
<Box fontSize={[16, 14, 12]} />

These two features make it extremely easy to scaffold new components.

I want to use Styled System with styled-jsx, because styled-jsx is included with Next.js, and I use Next.js for everything React. But all the Styled System tooling I found was for styled-components or Emotion, so I made my own.

styled-jsx-system

styled-jsx-system lets you use Styled System with styled-jsx.

$ yarn add styled-jsx-system

Wrap your components with the provided HOC and accept a className prop:

import withStyledSystem from 'styled-jsx-system'
import { color } from 'styled-system'

const Box = ({ className, children }) => {
  return (
    <div className={className}>
      {children}

      <style jsx>{`
        div {
          padding: 8px;
        }
      `}</style>
    </div>
  )
}

export default withStyledSystem(Box, [color])

That's it! You can now use Styled System props with your Box component:

<Box color={['#000', '#666', '#fff']}>Hello</Box>

Other Styled System features like compose, system, and themeing are supported too. Check out the repository for more information.

Cool. Let me know if you end up using it.

Thanks to jxnblk for Styled System and all his cool CSS experiments, and thanks to Giuseppe, JJ, and Shu for help with compiling and publishing!