Releases

Updating styled components is usually as simple as npm install. Only major versions have the potential to introduce breaking changes (noted in the following release notes).

What's Changed

Replace deprecated global JSX namespace by @Janpot in https://github.com/styled-components/styled-components/pull/4333
Allow Passing Shadow Root as Sheet Target by @joealden in https://github.com/styled-components/styled-components/pull/4309

New Contributors

@Janpot made their first contribution in https://github.com/styled-components/styled-components/pull/4333
@joealden made their first contribution in https://github.com/styled-components/styled-components/pull/4309

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.12...v6.1.13

What's Changed

Export rehydrate from StyleSheet by @hamidrezahanafi in https://github.com/styled-components/styled-components/pull/4328
Prevent ServerStyleSheet generating empty style tags/elements by @hamidrezahanafi in https://github.com/styled-components/styled-components/pull/4327

New Contributors

@hamidrezahanafi made their first contribution in https://github.com/styled-components/styled-components/pull/4328

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.11...v6.1.12

What's Changed

feat(types): add types to support third-party wrapping scenarios by @quantizor in https://github.com/styled-components/styled-components/pull/4307

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.10...v6.1.11

What's Changed

Update dependencies by @quantizor in https://github.com/styled-components/styled-components/pull/4297
Export IStyledComponentBase interface by @akkadaya in https://github.com/styled-components/styled-components/pull/4300
revert type changes introduced in https://github.com/styled-components/styled-components/pull/4288 due to a large number of bug reports

New Contributors

@akkadaya made their first contribution in https://github.com/styled-components/styled-components/pull/4300

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.9...v6.1.10

What's Changed

fix: improve types for .attrs() by @uhyo in https://github.com/styled-components/styled-components/pull/4288
fix(types): allow using a styled component as a key inside object styles in the web runtime by @iiroj in https://github.com/styled-components/styled-components/pull/4249
Upgrading babel dependencies to latest to fix CVE-2023-45133 by @JesseObrien in https://github.com/styled-components/styled-components/pull/4214

New Contributors

@uhyo made their first contribution in https://github.com/styled-components/styled-components/pull/4288
@iiroj made their first contribution in https://github.com/styled-components/styled-components/pull/4249
@JesseObrien made their first contribution in https://github.com/styled-components/styled-components/pull/4214

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.8...v6.1.9

Revert adding peerDependencies from v6.1.7; apparently some package managers have differing behaviors around peerDependenciesMeta[package].optional which is causing issues. Will revisit at a later date if possible.

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.7...v6.1.8

What's Changed

chore: add all missing peer dependency statements by @quantizor in https://github.com/styled-components/styled-components/pull/4243
NOTE: this change may cause some installed dependency duplication until this NPM bug is addressed but yarn and pnpm have correct behavior. Bun also has a similar bug.
Overall these changes ensure that styled-components is specifying a known working version of all utilized libraries, while instructing the client package manager that higher semver-compliant versions are permissible and should work, assuming the relevant libraries are compliant in practice.

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.6...v6.1.7

What's Changed

fix: bump stylis to 4.3.1 to resolve issue with leaking nested selectors by @quantizor in https://github.com/styled-components/styled-components/pull/4245

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.5...v6.1.6

What's Changed

fix: further constrain self-referencing to match v5 behavior by @quantizor in https://github.com/styled-components/styled-components/pull/4244

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.4...v6.1.5

What's Changed

fix: allow using attrs to provide a custom theme prop to child components by @quantizor in https://github.com/styled-components/styled-components/pull/4242

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.3...v6.1.4

What's Changed

fix(types): missing type declarations by @benjaminrae in https://github.com/styled-components/styled-components/pull/4237
fix(deps): pin dependencies to exact versions prior to bun migration by @quantizor in https://github.com/styled-components/styled-components/pull/4238
fix(types): nested styled with additional prop types by @justinbhopper in https://github.com/styled-components/styled-components/pull/4236

New Contributors

@benjaminrae made their first contribution in https://github.com/styled-components/styled-components/pull/4237

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.2...v6.1.3

What's Changed

fix(types): StyledObject type to allow nested selectors by @maximebiloe in https://github.com/styled-components/styled-components/pull/4212
feat(types): expose FastOmit to improve emit performance by @justinbhopper in https://github.com/styled-components/styled-components/pull/4230

New Contributors

@maximebiloe made their first contribution in https://github.com/styled-components/styled-components/pull/4212

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.1...v6.1.2

What's Changed

fix(types): remove duplicated type by @takurinton in https://github.com/styled-components/styled-components/pull/4200
fix(native): image unsupported border color style by @nazmeln in https://github.com/styled-components/styled-components/pull/4195
fix(styled): add displayName in all environments by @delijah in https://github.com/styled-components/styled-components/pull/4208
fix(ssr): correctly place new rules after hydrated rules by @probablyup in https://github.com/styled-components/styled-components/pull/4210

New Contributors

@nazmeln made their first contribution in https://github.com/styled-components/styled-components/pull/4195
@delijah made their first contribution in https://github.com/styled-components/styled-components/pull/4208

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.1.0...v6.1.1

What's Changed

fix(native): bump postcss version from 8.4.23 to 8.4.31 by @davidlacasse in https://github.com/styled-components/styled-components/pull/4188
fix(native): solve ts warning by @krudos in https://github.com/styled-components/styled-components/pull/4190
chore: remove babel macro due to lack of usage by @probablyup in https://github.com/styled-components/styled-components/pull/4193

New Contributors

@davidlacasse made their first contribution in https://github.com/styled-components/styled-components/pull/4188

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.9...v6.1.0

fix bundling to not hardcode window (should fix some testing use cases that were incorrectly assuming a server environment when JSDOM and similar are in use)

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.8...v6.0.9

What's Changed

feat(native): add toStyleSheet function by @krudos in https://github.com/styled-components/styled-components/pull/4124
fix: prevent StyleSheetManager updating context on every render by @keeganstreet in https://github.com/styled-components/styled-components/pull/4159
fix(types): ensure typing for static properties defined on third-party components wrapped by styled-components by @MartinPELCAT in https://github.com/styled-components/styled-components/pull/4141
fix: production mode inconsistent CSS rendering when dynamic property values are the same but property names are different by @bcole808 in https://github.com/styled-components/styled-components/pull/4132
fix(types): decrease type complexity by moving off of JSX.IntrinsicElements for the supported element list by @RJWadley in https://github.com/styled-components/styled-components/pull/4149
fix(types): adopt ref typing from forwardedAs by @probablyup in https://github.com/styled-components/styled-components/pull/4163
chore: update typescript reference on issue template by @chilled-capybara in https://github.com/styled-components/styled-components/pull/4150
chore(types): add type exports for StyleFunction, Interpolation by @bcole808 in https://github.com/styled-components/styled-components/pull/4140
chore: updated Contributing guide benchmark instructions by @bcole808 in https://github.com/styled-components/styled-components/pull/4137
chore(types): add missing types CSSProperties, CSSObject, CSSPseudos and CSSKeyframes by @takurinton in https://github.com/styled-components/styled-components/pull/4117

New Contributors

@takurinton made their first contribution in https://github.com/styled-components/styled-components/pull/4117
@krudos made their first contribution in https://github.com/styled-components/styled-components/pull/4124
@chilled-capybara made their first contribution in https://github.com/styled-components/styled-components/pull/4150
@MartinPELCAT made their first contribution in https://github.com/styled-components/styled-components/pull/4141
@RJWadley made their first contribution in https://github.com/styled-components/styled-components/pull/4149

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.7...v6.0.8

What's Changed

refactor(types): enable exactOptionalPropertyTypes check by @aspirisen in https://github.com/styled-components/styled-components/pull/3993
fix(types): allow number for height/width/etc (#4090) by @drewbrend in https://github.com/styled-components/styled-components/pull/4111

New Contributors

@aspirisen made their first contribution in https://github.com/styled-components/styled-components/pull/3993
@drewbrend made their first contribution in https://github.com/styled-components/styled-components/pull/4111

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.6...v6.0.7

What's Changed

fix(types): issues with StyleFunctions and StyledObjects by @bcole808 in https://github.com/styled-components/styled-components/pull/4107

New Contributors

@bcole808 made their first contribution in https://github.com/styled-components/styled-components/pull/4107

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.5...v6.0.6

What's Changed

Fix createGlobalStyle not removing styles on unmount by @mdeschamps in https://github.com/styled-components/styled-components/pull/4101

New Contributors

@mdeschamps made their first contribution in https://github.com/styled-components/styled-components/pull/4101

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.4...v6.0.5

What's Changed

refactor: dev warning on unknown props retargeted specifically toward HTML targets rather than other React components by @woodreamz in https://github.com/styled-components/styled-components/pull/4084
fix: untyped event handler callbacks by @ziolekjj in https://github.com/styled-components/styled-components/pull/4086

New Contributors

@woodreamz made their first contribution in https://github.com/styled-components/styled-components/pull/4084
@ziolekjj made their first contribution in https://github.com/styled-components/styled-components/pull/4086

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.3...v6.0.4

What's Changed

fix: StyleSheetManager missing Stylis types by @MattIPv4 in https://github.com/styled-components/styled-components/pull/4078

New Contributors

@MattIPv4 made their first contribution in https://github.com/styled-components/styled-components/pull/4078

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.2...v6.0.3

What's Changed

fix: StyleSheetManager must accept undefined props by @gineika in https://github.com/styled-components/styled-components/pull/4069
fix: replace slow Omit type by @gineika in https://github.com/styled-components/styled-components/pull/4068
drop displayName in production to save bytes, it's already present in the static className if you're using the babel plugin or equivalent
refactor use of flatMap and at with ES5-compliant variants

New Contributors

@gineika made their first contribution in https://github.com/styled-components/styled-components/pull/4069

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.1...v6.0.2

Fixed an issue where a dev-time warning was being triggered too eagerly.

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0...v6.0.1

yarn add styled-components

Changed in this version

fix(types): prevent prop bleed on styling properties (fixes #4053, c0f8015af64367938ff9d9debf90fb8005459c6c)
feat(types): ship csstype via "CSS" namespace (e6c4f0a6b1a1c483cf0c433f0d0434bbda124d2c)
chore: bump stylis to 4.3 (fixes #4007, fa58875dcbdbff43532c3b9519eb5fc7d009830d)
reduced some sources of unnecessary branching logic

Breaking changes in v6

Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
dropped $as and $forwardedAs props (use as or forwardedAs)
dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML
StyleSheetManager
- replaced disableVendorPrefixes with enableVendorPrefixes prop
- dropped automatic vendor prefixing; if you need to support older browsers, you can re-enable it easily with the above prop tsx <StyleSheetManager enableVendorPrefixes> {/* your React tree and ThemeProvider goes here */} </StyleSheetManager>
dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead
node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v5.3.7...v6.0.0

yarn add styled-components

Changed in this version

fix: stylis types are now included as a direct dependency #4051 (235a62b8d2f2ad42319df380f83a7e033b177db1)
refactor: simplify code related to style tag injection #4040 (c3939a4aa8a98ba1ed38a3ea024470f2395439a5)
chore: don't warn if shouldForwardProp is in use and the prop is forwarded (https://github.com/styled-components/styled-components/commit/00ab9c41494fca04ae473e1053bac8f42f4220b5)

Breaking changes in v6

Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
dropped $as and $forwardedAs props (use as or forwardedAs)
dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML
StyleSheetManager
- replaced disableVendorPrefixes with enableVendorPrefixes prop
- dropped automatic vendor prefixing; if you need to support older browsers, you can re-enable it easily with the above prop tsx <StyleSheetManager enableVendorPrefixes> {/* your React tree and ThemeProvider goes here */} </StyleSheetManager>
dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead
node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.5..v6.0.0-rc.6

yarn add styled-components

Changed in this version

Compatibility with frozen Object prototype, part 2 by @jportner in https://github.com/styled-components/styled-components/pull/4042
ensure useTheme hook returns theme object by @nksfrank in https://github.com/styled-components/styled-components/pull/4033
revert rc.3 type changes, investigate alternate fixes by @probablyup in https://github.com/styled-components/styled-components/pull/4037
finalize rc.4 inclusions by @probablyup in https://github.com/styled-components/styled-components/pull/4047
object styles now have strong typing
add dev-time warning if enableVendorPrefixes needs to be enabled based on prop usage

New Contributors

@nksfrank made their first contribution in https://github.com/styled-components/styled-components/pull/4033

Breaking changes in v6

Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
dropped $as and $forwardedAs props (use as or forwardedAs)
dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML
StyleSheetManager
- replaced disableVendorPrefixes with enableVendorPrefixes prop
- dropped automatic vendor prefixing; if you need to support older browsers, you can re-enable it easily with the above prop tsx <StyleSheetManager enableVendorPrefixes> {/* your React tree and ThemeProvider goes here */} </StyleSheetManager>
dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead
node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.3..v6.0.0-rc.5

fix(types): several regression fixes and improved CSSProp typing by @justinbhopper, @aliceHendicott, @probablyup in https://github.com/styled-components/styled-components/pull/4028
fix(stylis): ensure rules are split coming out of stylis by @probablyup in https://github.com/styled-components/styled-components/pull/4021 (this is a partial fix for #4007, the remainder requires https://github.com/thysultan/stylis/pull/315)

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.2...v6.0.0-rc.3

Removed use of the useDebugValue hook to rectify older React support.

Full Changelog: https://github.com/styled-components/styled-components/compare/v5.3.10...v5.3.11

yarn add styled-components

Changed in this version

fix(types): perf issue with large union types by @justinbhopper in https://github.com/styled-components/styled-components/pull/4011
fix(types): resolve deficiencies in the attr typings, and many other type improvements by @justinbhopper, @aliceHendicott, @probablyup in https://github.com/styled-components/styled-components/pull/4014

New Contributors

@justinbhopper made their first contribution in https://github.com/styled-components/styled-components/pull/4011

Upcoming

v6 migration documentation

Breaking changes in v6

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
dropped $as and $forwardedAs props (use as or forwardedAs)
dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML
StyleSheetManager
- replaced disableVendorPrefixes with enableVendorPrefixes prop
- dropped automatic vendor prefixing; if you need to support older browsers, you can re-enable it easily with the above prop tsx <StyleSheetManager enableVendorPrefixes> {/* your React tree and ThemeProvider goes here */} </StyleSheetManager>
dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead
node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.1...v6.0.0-rc.2

yarn add styled-components

Changed in this version

bump stylis to 4.2.0 to enable @layer rule support

Upcoming

v6 migration documentation

Breaking changes in v6

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
dropped $as and $forwardedAs props (use as or forwardedAs)
dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML
StyleSheetManager
- replaced disableVendorPrefixes with enableVendorPrefixes prop
- dropped automatic vendor prefixing; if you need to support older browsers, you can re-enable it easily with the above prop tsx <StyleSheetManager enableVendorPrefixes> {/* your React tree and ThemeProvider goes here */} </StyleSheetManager>
dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead
node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.0...v6.0.0-rc.1