Styled System

Reference Table

Styled System is organized into categories of style props. Each function provides the following props and maps to scales defined in a theme.

Space

import { space } from 'styled-system'
// or `import space from '@styled-system/space'`
PropCSS PropertyTheme Field
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
mxmargin-left and margin-rightspace
mymargin-top and margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
pxpadding-left and padding-rightspace
pypadding-top and padding-bottomspace

Color

import { color } from 'styled-system'
// or `import color from '@styled-system/color'`
PropCSS PropertyTheme Field
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography

import { typography } from 'styled-system'
// or `import typography from '@styled-system/typography'`
PropCSS PropertyTheme Field
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone

Layout

import { layout } from 'styled-system'
// or `import layout from '@styled-system/layout'`
PropCSS PropertyTheme Field
widthwidthsizes
heightheightsizes
minWidthmin-widthsizes
maxWidthmax-widthsizes
minHeightmin-heightsizes
maxHeightmax-heightsizes
sizewidth heightsizes
displaydisplaynone
verticalAlignvertical-alignnone
overflowoverflownone

Flexbox

import { flexbox } from 'styled-system'
// or `import flexbox from '@styled-system/flexbox'`
PropCSS PropertyTheme Field
alignItemsalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContentjustify-contentnone
flexWrapflex-wrapnone
flexDirectionflex-directionnone
flexflex (shorthand)none
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout

import { grid } from 'styled-system'
// or `import grid from '@styled-system/grid'`
PropCSS PropertyTheme Field
gridGapgrid-gapspace
gridRowGapgrid-row-gapspace
gridColumnGapgrid-column-gapspace
gridColumngrid-columnnone
gridRowgrid-rownone
gridAreagrid-areanone
gridAutoFlowgrid-auto-flownone
gridAutoRowsgrid-auto-rowsnone
gridAutoColumnsgrid-auto-columnsnone
gridTemplateRowsgrid-template-rowsnone
gridTemplateColumnsgrid-template-columnsnone
gridTemplateAreasgrid-template-areasnone

Background

import { background } from 'styled-system'
// or `import background from '@styled-system/background'`
PropCSS PropertyTheme Field
backgroundbackgroundnone
backgroundImagebackground-imagenone
backgroundSizebackground-sizenone
backgroundPositionbackground-positionnone
backgroundRepeatbackground-repeatnone

Border

import { border } from 'styled-system'
// or `import border from '@styled-system/border'`
PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderRadiusborder-radiusradii
borderTopborder-topborders
borderRightborder-rightborders
borderBottomborder-bottomborders
borderLeftborder-leftborders
borderXborder-left & border-rightborders
borderYborder-top & border-bottomborders

Position

import { position } from 'styled-system'
// or `import position from '@styled-system/position'`
PropCSS PropertyTheme Field
positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow

import { shadow } from 'styled-system'
// or `import shadow from '@styled-system/shadow'`
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

Variants

import { textStyle, colorStyle, buttonStyle } from 'styled-system'
// or `import { textStyle, colorStyle, buttonStyle } from '@styled-system/variant'`
Function NamePropTheme Field
textStyletextStyletextStyles
colorStylecolorscolorStyles
buttonStylevariantbuttons
Edit this page on GitHub
Previous:
API
Next:
Packages