@styled-system/prop-types

Add prop types to components built with Styled System

1npm i styled-system @styled-system/prop-types

1import styled from 'styled-components'
2import { space, color } from 'styled-system'
3import propTypes from '@styled-system/prop-types'
4
5const Box = styled('div')(space, color)
6
7Box.propTypes = {
8  ...propTypes.space,
9  ...propTypes.color,
10}

Available Type Categories

• space
• color
• layout
• typography
• flexbox
• border
• background
• position
• grid

See props of each category in the reference table.

Custom Props

1import styled from 'styled-components'
2import { space, system } from 'styled-system'
3import propTypes, { propType } from '@styled-system/prop-types'
4
5const gridGap = system({
6  gap: {
7    property: 'gridGap',
8    scale: 'space',
9    defaultScale: [0, 4, 8, 16, 32, 64, 128, 256, 512]
10  }
11})
12
13const Stack = styled('div')(
14  compose(space, gridGap)
15)
16
17Stack.propTypes = {
18  ...propTypes.space,
19  gap: propType,
20}