Skip to content

Instantly share code, notes, and snippets.

@tkh44
Created August 30, 2017 20:54
Show Gist options
  • Save tkh44/ba7b13da7c1d694a3fec40410565a99d to your computer and use it in GitHub Desktop.
Save tkh44/ba7b13da7c1d694a3fec40410565a99d to your computer and use it in GitHub Desktop.
styled-system with emotion.
import styled, { css } from 'emotion/react'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'
export const display = responsiveStyle('display')
export const flex = responsiveStyle('flex')
export const order = responsiveStyle('order')
const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
const direction = responsiveStyle('flexDirection', 'direction')
const align = responsiveStyle('alignItems', 'align')
const justify = responsiveStyle('justifyContent', 'justify')
const column = props => props.column ? css`flex-direction:column;` : null
const Box = styled('div')`
${display};
${space};
${width};
${fontSize};
${color};
${flex};
${order};
${wrap};
${column};
${direction};
${align};
${justify};
`
export default Box
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment