⬢ Style props for rapid UI development
space
function has been rewritten with the core style
and compose
utilitiesmarginTop
). Shorthand aliases still work as before.alias
argument to style
utilitystyles
object exportutil
object exportmerge
utilitymixed
utility since it did not behave as expectedtransformValue
option in style
utilityratio
style functionborders
style function
solid
border-style
borderWidth
, borderStyle
, borderColor
, and borderRadius
propsstyleType
from prop types meta
fieldsget
utility: now returns the last argument as a fallbackcss
to mixed
to avoid naming collisionsThis rewrite helps make styled-system smaller, faster, and simplifies the API.
style
utility is now responsive by defaultbackgroundImage
no longer wraps values with url()
buttonStyle
prop has been renamed to variant
style
utility getter
argument has beend renamed to transformValue
util.get
no longer supports a fallback argumentresponsiveStyle
use style
insteadcomplexStyle
use variant
insteadcomplexStyle
(variant
) boolean props are no longer supportedpseudoStyle
hover
focus
active
disabled
fontSize
and width
no longer support shorthand propsalias
optionnumberToPx
option (pass util.px
to the transformValue
argument instead)util.media
util.neg
util.arr
util.getWidth
util.mq
util.fallbackTheme
util.breaks
util.dec
util.getValue
f
props with the fontSize
propw
props with the width
propbuttonStyle
prop with the variant
propbackgroundImage
props include the CSS url()
syntax where neededresponsiveStyle
with the style
utilitynumberToPx
argument with transformValue: util.px
getter
argument with transformValue
complexStyle
with variant
alias
props with something like recompose's mapProps
variant
styles, including:
buttonStyle
textStyle
colors
hover
, focus
, active
, disabled
, or pseudoStyle
, consider adding your own replacementtextAlign
, alignItems
, justifyContent
, flexWrap
, and other CSS propertiesstyle
, responsiveStyle
, and pseudoStyle
utilities now accept getter
and getters
arguments for converting valuesborders
utility that normalizes the API with other styled-system utilitiesfontSize
, width
, and color
cleanElement
utility is now a separate package, removing the react
dependency from the core libraryflexWrap
utility now expects a string value for its prop (previously a boolean)borderWidth
utility has been replaced with the borders
utilityborderTop
, borderRight
, borderBottom
, and borderLeft
props no longer accept boolean props, but follow the same convention as other utilities[ 0, 4, 8, 16, 32, 64, 128, 256, 512 ]
(this only affects usage without a custom theme.space
providedtheme
utility has been renamed to themeGet
(alternative names under consideration)removeProps
utilityidx
utilityresponsiveStyle
arguments APIpseudoStyle
arguments API has changed to more closely align with style
and responsiveStyle
Shims for breaking changes
To make migration easier, some breaking changes will continue to work as intended or similarly:
justifyContent
is aliased to the justify
proptextAlign
is aliased to the align
prop, though this may cause unexpected behavior when used with the alignItems
propalignItems
is aliased to the align
prop, though this may cause unexpected behavior when used with the textAlign
propflexWrap
is aliased to the wrap
prop, but a string value of wrap
or nowrap
should be provided. (a shim to convert boolean true
values to wrap
has been added as well)borderWidth
now works similarly to the new borders
utility, which will continue to work for most use-casesthemeGet
utility is aliased to a theme
export