@styled-system/css

Styled System for the css prop

npm i @styled-system/css

Styled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.

// usage with the css prop
import React from 'react'
import css from '@styled-system/css'

const Beep = props =>
  <div
    {...props}
    css={css({
      fontSize: [4, 5, 6],
      color: 'primary',
    })}
  />

// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@styled-system/css'

const Boop = styled('div')(
  css({
    fontSize: [ 4, 5, 6 ],
    color: 'primary',
    bg: 'gray',
    '&:hover': {
      color: 'secondary',
    },
  })
)

To make the css prop work with styled-components, babel-plugin-styled-components must be enabled.

Theme Keys

The following keys in your style object will work the same as Styled System props, pulling values from your theme object.

Property	Theme Key
`fontFamily`	`fonts`
`fontSize`	`fontSizes`
`fontWeight`	`fontWeights`
`lineHeight`	`lineHeights`
`letterSpacing`	`letterSpacings`
`color`	`colors`
`backgroundColor`, `bg`	`colors`
`margin`, `m`	`space`
`marginTop`, `mt`	`space`
`marginRight`, `mr`	`space`
`marginBottom`, `mb`	`space`
`marginLeft`, `ml`	`space`
`marginX`, `mx`	`space`
`marginY`, `my`	`space`
`padding`, `p`	`space`
`paddingTop`, `pt`	`space`
`paddingRight`, `pr`	`space`
`paddingBottom`, `pb`	`space`
`paddingLeft`, `pl`	`space`
`paddingX`, `px`	`space`
`paddingY`, `py`	`space`
`top`	`space`
`bottom`	`space`
`left`	`space`
`right`	`space`
`border`	`borders`
`borderTop`	`borders`
`borderRight`	`borders`
`borderBottom`	`borders`
`borderLeft`	`borders`
`borderColor`	`colors`
`borderWidth`	`borderWidths`
`borderStyle`	`borderStyles`
`borderRadius`	`radii`
`boxShadow`	`shadows`
`textShadow`	`shadows`
`zIndex`	`zIndices`
`width`	`sizes`
`minWidth`	`sizes`
`maxWidth`	`sizes`
`height`	`sizes`
`minHeight`	`sizes`
`maxHeight`	`sizes`
`size`	`sizes`

Responsive Arrays

All CSS properties accept arrays as values for responsive styles.

<div
  css={css({
    fontSize: [ 4, 5, 6 ],
  })}
/>

In this example, fontSize accepts an array, picking up values from the theme.fontSizes scale, and borderBottom is passed through as plain CSS.

<div
  css={css({
    // Styled System key
    fontSize: [ 3, 4, 5 ],
    // CSS property
    borderBottom: '2px solid tomato',
  })}
/>

MIT License

Current Tags

5.0.0-alpha.0 ... alpha (5 years ago)
5.1.5 ... latest (5 years ago)
5.0.0-12 ... next (5 years ago)

41 Versions

5.1.5 ... 5 years ago
5.1.4 ... 5 years ago
5.0.23 ... 5 years ago
5.0.22 ... 5 years ago
5.0.21 ... 5 years ago
5.0.20 ... 5 years ago
5.0.19 ... 5 years ago
5.0.17 ... 5 years ago
5.0.16 ... 5 years ago
5.0.13 ... 5 years ago
5.0.11 ... 5 years ago
5.0.10 ... 5 years ago
5.0.9 ... 5 years ago
5.0.5 ... 5 years ago
5.0.4 ... 5 years ago
5.0.3 ... 5 years ago
5.0.2 ... 5 years ago
5.0.1 ... 5 years ago
5.0.0 ... 5 years ago
5.0.0-12 ... 5 years ago
5.0.0-11 ... 5 years ago
5.0.0-10 ... 5 years ago
5.0.0-9 ... 5 years ago
5.0.0-7 ... 5 years ago
5.0.0-alpha.0 ... 5 years ago
5.0.0-5 ... 5 years ago
5.0.0-3 ... 5 years ago
5.0.0-1 ... 5 years ago
5.0.0-0 ... 5 years ago
2.0.4 ... 5 years ago
2.0.3 ... 5 years ago
2.0.2 ... 6 years ago
2.0.1 ... 6 years ago
2.0.0 ... 6 years ago
2.0.0-0 ... 6 years ago
1.0.3 ... 6 years ago
1.0.2 ... 6 years ago
1.0.1 ... 6 years ago
1.0.0 ... 6 years ago
1.0.0-1 ... 6 years ago
1.0.0-0 ... 6 years ago