pacocoursey/styled-jsx-system


PoC for using styled-system with styled-jsx

https://styled-jsx-system.now.sh/

Language: TypeScript


styled-jsx-system

This is a proof of concept. Don't use it, I'm just experimenting!

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


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'

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

      <style jsx>{`
        div {
          padding: 8px;
        }
      `}</style>
    </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-sytem'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...

Themeing

styled-jsx-system supports themeing as you would normally in styled-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>
)

Project Statistics

Sourcerank 2
Repository Size 224 KB
Stars 3
Forks 0
Watchers 2
Open issues 0
Dependencies 1,120
Contributors 1
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

Paco

Packages Referencing this Repo

styled-jsx-system
> This is a **proof of concept**. Don't use it, I'm just experimenting!
Latest release 0.0.8 - Updated - 3 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-12-22 05:56:56 UTC

Login to resync this repository