styled-jsx-system

styled-jsx-system is a way to use styled-system with styled-jsx.

Installation

$ yarn add styled-jsx-system

You must also have styled-jsx and styled-system installed.

Usage

You have a Box component that you style with styled-jsx:

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

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

export default Box

If you want your Box to support styled-system props like space, export your Box component with the styled-jsx-system HOC and ensure you accept a className prop:

+ import { space } from 'styled-system'
+ import withStyledSystem from 'styled-jsx-system'

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

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

- export default Box
+ export default withStyledSystem(Box, [space])

That's it! You can now use styled-system props with your Box component:

<Box m={[20, 10, 5]}>Hello</Box>

More style props

To support more of styled-system's style props, add them to the second argument of the HOC:

import { space, typography, color } from 'styled-system'

export default withStyledSystem(Box, [space, typography, color])
// <Box /> now supports props like `color`, `bg`, `fontSize`, etc...

Compose

Using styled-system's compose works too:

import { compose, space, typography, color } from 'styled-system'

export default withStyledSystem(Box, [compose(space, typography, color)])

System

Custom props using the system utility are supported:

import { system } from 'styled-system'

const customProp = system({
  lineClamp: {
    property: 'WebkitLineClamp',
    transform: lines => String(lines)
  }
})

export default withStyledSystem(Box, [customProp])
// <Box /> now supports the lineClamp prop (i.e. <Box lineClamp={3} />)

Themeing

styled-jsx-system supports themeing, just import the ThemeProvider from styled-jsx-system:

import { ThemeProvider } from 'styled-jsx-system'

const myTheme = {
  colors: {
    gray: ['#fafafa', '#efefef', '#666']
  }
}

export default () => (
  <ThemeProvider theme={myTheme}>
    <Box color="gray.2">Box component using a custom theme</Box>
  </ThemeProvider>
)

Thanks

• Giuseppe
• JJ
• Shu