Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
test
.gitignore
.npmignore
README.md
package.json

README.md

@styled-system/prop-types

Add prop types to components built with Styled System

npm i styled-system @styled-system/prop-types
import styled from 'styled-components'
import { space, color } from 'styled-system'
import propTypes from '@styled-system/prop-types'

const Box = styled('div')(space, color)

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.color,
}

Available Type Categories

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

See props of each category in the reference table.

Custom Props

import styled from 'styled-components'
import { space, system } from 'styled-system'
import propTypes, { propType } from '@styled-system/prop-types'

const gridGap = system({
  gap: {
    property: 'gridGap',
    scale: 'space',
    defaultScale: [0, 4, 8, 16, 32, 64, 128, 256, 512]
  }
})

const Stack = styled('div')(
  compose(space, gridGap)
)

Stack.propTypes = {
  ...propTypes.space,
  gap: propType,
}
You can’t perform that action at this time.