Style Props

Almost every CSS attributes are available in props.

Space

The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

  • Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
  • Negative values can be used for negative margins.
  • Numbers greater than the length of the theme.space array are converted to raw pixel values.
  • String values are passed as raw CSS values.
  • And object values are converted into responsive values.

Margin and padding props follow a shorthand syntax for specifying direction.

  • margin or m
  • marginTop or mt
  • marginRight or mr
  • marginBottom or mb
  • marginLeft or ml
  • mx: margin-left and margin-right
  • my: margin-top and margin-bottom
  • padding or p
  • paddingTop or pt
  • paddingRight or pr
  • paddingBottom or pb
  • paddingLeft or pl
  • px: padding-left and padding-right
  • py: padding-top and padding-bottom
  • space: all spaces utilities
// sets margin value of `theme.space[2]`
<Box m={2} />
// sets margin value of `-1 * theme.space[2]`
<Box m={-2} />
// sets a margin value of `16px` since it's greater than `theme.space.length`
<Box m={16} />
// sets margin `"auto"`
<Box m="auto" />
// sets margin `4px` on all viewports and `8px` from the `lg` breakpoint and up
<Box m={{ sm: 1, lg: 2 }} />

Layout

Dimensions utilities parse a component's prop and convert it into a CSS width declaration.

  • Numbers from 0-1 are converted to percentage widths.
  • Numbers greater than 1 are converted to pixel values.
  • String values are passed as raw CSS values.
  • And objects are converted to responsive width styles.

Available layout utilities:

  • display
  • width
  • height
  • maxWidth
  • maxHeight
  • minWidth
  • minHeight
  • size
  • verticalAlign
  • layout: all layout utilities

Example using width:

// examples
// width `50%`
<Box width={0.5} />
// width `256px`
<Box width={256} />
// width `'2em'`
<Box width="2em" />
// width `100%` on all viewports and `50%` from the "md" breakpoint and up
<Box width={{ sm: 1, md: 0.5 }} />

Grid system

Available grid system utilities:

  • row
  • col

See also Grid system

Typography

Available typography utilities:

  • fontFamily
  • fontSize
  • lineHeight
  • fontWeight
  • fontStyle
  • textAlign
  • letterSpacing
  • color
  • textTransform
  • typography: all typography utilities

Flexboxes

Available flexbox utilities:

  • display
  • alignItems
  • alignContent
  • justifyContent
  • justifyItems
  • flexWrap
  • flexBasis
  • flexDirection
  • flex
  • justifySelf
  • alignSelf
  • order
  • flexboxes: all flexboxes utilities

Grids

Available grid utilities:

  • gridGap
  • gridColumnGap
  • gridRowGap
  • gridColumn
  • gridRow
  • gridAutoFlow
  • gridAutoColumns
  • gridAutoRows
  • gridTemplateColumns
  • gridTemplateRows
  • gridTemplateAreas
  • gridArea
  • grids: all grid utilities

Backgrounds

Available background utilities:

  • background
  • backgroundColor or bg
  • backgroundImage
  • backgroundSize
  • backgroundPosition
  • backgroundRepeat
  • backgrounds: all background utilities

Positioning

Available positioning utilities:

  • position
  • zIndex
  • top
  • right
  • bottom
  • left
  • positioning: all positioning utilities

Borders

Available border utilities:

  • border
  • borderTop
  • borderTopColor
  • borderRight
  • borderRightColor
  • borderBottom
  • borderBottomColor
  • borderLeft
  • borderLeftColor
  • borderColor
  • borderWidth
  • borderStyle
  • borderRadius
  • borders: all border utilities

Shadows

Available shadow utilities:

  • boxShadow
  • textShadow
  • shadows: all shadow utilities

Basics

Available basic utilities:

  • opacity
  • overflow
  • transition
  • basics: all basic utilities

Theme specification

See Theme Specification to see how to customize all of these properties in your theme.