Skip to content

Upgrading styled-components 4 to 5

Breaking4.4.1 → 5.3.11Breaking5Platform1Deprecated1New14Changed27Fixed37Other8

Full comparisonBack to styled-components
BreakingUpgrade verdict

5 breaking changes and a platform requirement change.

In plain terms
  • The old way of writing dynamic attributes no longer works; use the function form instead.
  • If you set font properties with a line height that has no unit, you must add a unit such as px.
  • A component that gets merged with another no longer keeps a separate internal ID, which prevents style priority conflicts in some component orders.
  • If you used the stylisOptions prop to turn off vendor prefixes, use the new disableVendorPrefixes prop instead.
Must act Top 5 of 7 that need code or config changes

styled-components publishes an official migration guide for version 5. It covers more than the release notes do.

Migrating to v5 FAQ page ↗

No longer runs postinstall when installed.

Requires Node.js >=10 from 5.2.0-test.3 (none stated before).

Adds @emotion/stylis ^0.8.4, hoist-non-react-statics ^3.0.0, shallowequal ^1.1.0.

Drops memoize-one, merge-anything, prop-types, react-is, stylis, stylis-rule-sheet.

Installs 37 packages in all (was 42).

What you must change

Breaking5
Removes the deprecated subfunction attrs syntax; attrs must now take a function returning the props object.
styled.div.attrs
5.0.0GitHub ReleaseSummarizedView source
Updates css-to-react-native to v3.0.0, which no longer allows unitless line height when setting font properties.
css-to-react-native
5.0.0GitHub ReleaseSummarizedView source
Removes the concept of foldedComponentIds, fixing specificity clashes when a folded component is used later in the tree than the folding result.
foldedComponentIds
5.0.0-beta.6GitHub ReleaseSummarizedView source
Removes the stylisOptions prop from StyleSheetManager and reimplements vendor prefix removal as disableVendorPrefixes.
StyleSheetManagerstylisOptionsdisableVendorPrefixes
5.0.0-beta.5GitHub ReleaseSummarizedView source
Removes deprecated object-form attrs functionality.
attrs
5.0.0-alpha.2GitHub ReleaseSummarizedView source
Platform1
Adds an engines field to package.json, currently set to Node 10, the oldest supported LTS distribution.
engines
5.2.0GitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated1
Deprecates $as and $forwardedAs props, which will be removed in the next major version.
$as$forwardedAsasforwardedAs
5.3.6GitHub ReleaseSummarizedView source