[React] Styled System with extendable Box element

You can have a Box element, which just used for create other element or layout:

// example Box.js
import styled from 'styled-components'
import { space, color, layout } from 'styled-system'

const Box = styled.div(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  space,
  color,
  layout
)

export default Box

 

Just put 'space', 'color' and 'layout' so that, you can use it with the component built based on Box.

import styled from 'styled-components'
import Box from './Box'

const Grid = styled(Box)({
  display: 'grid'
})

Grid.propTypes = Box.propTypes

export default Grid;

 

 

Because we have used 'space', 'color' and 'layout' on box, so that we can also do:

<Grid
  as="footer"
  gridGap={3}
  justifyContent={[null, 'space-between']}
  justifyItems={['center', null]}
  gridAutoFlow={[null, 'column']}
>
  <Box>© Chuck Norris, 1940</Box>
  <Box>Have a nice day!</Box>
</Grid>