Reference components for using styled-system to build custom styled components. Copy and paste these components and customize them however you see fit.
importReactfrom'react'importstyledfrom'styled-components'import{display}from'styled-system'importhoistStaticsfrom'hoist-non-react-statics'import{Box}from'rebass'constmapProps=map=>Component=>hoistStatics(props=><Component{...map(props)}/>,Component)exportconstBase=styled(Box)(display)exportconstHide=mapProps(({ xsmall, small, medium, large, xlarge, display, ...props,})=>({display:display||[xsmall,small,medium,large,xlarge].map(n=>n ?'none' :'block'), ...props,}))(Base)exportdefaultHideimportstyledfrom'styled-components'import{position,zIndex,top,right,bottom,left,}from'styled-system'import{Box}from'rebass'exportconstPosition=styled(Box)(position,zIndex,top,right,bottom,left)exportconstRelative=styled(Position)([])Relative.defaultProps={position:'relative'}exportconstAbsolute=styled(Position)([])Absolute.defaultProps={position:'absolute'}exportconstFixed=styled(Position)([])Fixed.defaultProps={position:'fixed'}exportconstSticky=styled(Position)([])Sticky.defaultProps={position:'sticky'}