Styled System

Table of Style Functions

Core

Function NamePropCSS PropertyTheme Field
spacem, marginmarginspace
spacemt, marginTopmargin-topspace
spacemr, marginRightmargin-rightspace
spacemb, marginBottommargin-bottomspace
spaceml, marginLeftmargin-leftspace
spacemxmargin-left and margin-rightspace
spacemymargin-top and margin-bottomspace
spacep, paddingpaddingspace
spacept, paddingToppadding-topspace
spacepr, paddingRightpadding-rightspace
spacepb, paddingBottompadding-bottomspace
spacepl, paddingLeftpadding-leftspace
spacepxpadding-left and padding-rightspace
spacepypadding-top and padding-bottomspace
widthwidthwidthnone
fontSizefontSizefont-sizefontSizes
colorcolorcolorcolors
colorbg, backgroundColorbackground-colorcolors

Typography

Function NamePropCSS PropertyTheme Field
fontFamilyfontFamilyfont-familyfonts
textAligntextAligntext-alignnone
lineHeightlineHeightline-heightlineHeights
fontWeightfontWeightfont-weightfontWeights
fontStylefontStylefont-stylenone
letterSpacingletterSpacingletter-spacingletterSpacings

Layout

Function NamePropCSS PropertyTheme Field
displaydisplaydisplaynone
maxWidthmaxWidthmax-widthmaxWidths
minWidthminWidthmin-widthminWidths
heightheightheightheights
maxHeightmaxHeightmax-heightmaxHeights
minHeightminHeightmin-heightminHeights
sizesizewidth heightnone
verticalAlignverticalAlignvertical-alignnone

Flexbox

Function NamePropCSS PropertyTheme Field
alignItemsalignItemsalign-itemsnone
justifyContentjustifyContentjustify-contentnone
flexWrapflexWrapflex-wrapnone
flexDirectionflexDirectionflex-directionnone
flexflexflex (shorthand)none
alignContentalignContentalign-contentnone
justifyItemsjustifyItemsjustify-itemsnone
justifySelfjustifySelfjustify-selfnone
alignSelfalignSelfalign-selfnone
orderorderordernone
flexBasisflexBasisflex-basisnone

Grid Layout

Function NamePropCSS PropertyTheme Field
gridGapgridGapgrid-gapspace
gridRowGapgridRowGapgrid-row-gapspace
gridColumnGapgridColumnGapgrid-column-gapspace
gridColumngridColumngrid-columnnone
gridRowgridRowgrid-rownone
gridAreagridAreagrid-areanone
gridAutoFlowgridAutoFlowgrid-auto-flownone
gridAutoRowsgridAutoRowsgrid-auto-rowsnone
gridAutoColumnsgridAutoColumnsgrid-auto-columnsnone
gridTemplateRowsgridTemplateRowsgrid-template-rowsnone
gridTemplateColumnsgridTemplateColumnsgrid-template-columnsnone
gridTemplateAreasgridTemplateAreasgrid-template-areasnone

Background

Function NamePropCSS PropertyTheme Field
backgroundbackgroundbackgroundnone
backgroundImagebackgroundImagebackground-imagenone
backgroundSizebackgroundSizebackground-sizenone
backgroundPositionbackgroundPositionbackground-positionnone
backgroundRepeatbackgroundRepeatbackground-repeatnone

Misc

Function NamePropCSS PropertyTheme Field
borderborderborderborders
borderTopborderTopborder-topborders
borderRightborderRightborder-rightborders
borderBottomborderBottomborder-bottomborders
borderLeftborderLeftborder-leftborders
borderWidthborderWidthborder-widthborderWidths
borderStyleborderStyleborder-styleborderStyles
borderColorborderColorborder-colorcolors
borderRadiusborderRadiusborder-radiusradii
boxShadowboxShadowbox-shadowshadows
opacityopacityopacitynone
overflowoverflowoverflownone

The borders function composes multiple border props together.

Function NamePropCSS PropertyTheme Field
bordersborderborderborders
bordersborderTopborder-topborders
bordersborderRightborder-rightborders
bordersborderBottomborder-bottomborders
bordersborderLeftborder-leftborders
bordersborderWidthborder-widthborderWidths
bordersborderStyleborder-styleborderStyles
bordersborderColorborder-colorcolors
bordersborderRadiusborder-radiusradii

Position

Function NamePropCSS PropertyTheme Field
positionpositionpositionnone
zIndexzIndexz-indexzIndices
toptoptopnone
rightrightrightnone
bottombottombottomnone
leftleftleftnone

Variant Styles

Function NamePropCSS PropertyTheme Field
textStyletextStylestyle objecttextStyles
colorStylecolorsstyle objectcolorStyles
buttonStylevariantstyle objectbuttons
Previous:
API
Next:
Theme Specification