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>