styled-components v7

What's new in v7

npm install styled-components@test

v7 is an architectural reform for the web and the start of a new chapter for styled-components/native. We replaced stylis with an in-house CSS parser, rewrote the native runtime from the ground up, and set a clear direction for native: the same CSS should feel the same everywhere, whether you render on web, iOS, or Android.

The React Native CanIUse page shows how far v7 has moved that goal already, and where there is still platform work to do.

The bottleneck now is funding. styled-components can help provide a universal React visual surface while strengthening React Native's styling ecosystem at the same time; recent upstream React Native PRs are already filling gaps around textAlignVertical, textDecorationStyle, textDecorationColor, and text decoration rendering. Donations and sponsorship make it possible to do that work outside of "passion time".

Highlights

• In-house CSS parser replaces stylis as the runtime engine. No more :is() / :where() / :has() recursion bugs, no more silent breakage on modern at-rules.
• Modern CSS on React Native. @media and @container queries, viewport and container-query units, font-relative units, modern color spaces, relative-color syntax, the full Math L4 family, logical shorthands, gradients, and filters all work in styled.View\...``. See React Native gets modern CSS for the full surface and the compatibility matrix for per-feature status.
• Selectors and combinators on React Native. Attribute selectors with every operator, :not(<simple>), :has(<simple>), tree-structural pseudos, the four combinators between styled-component references, and the :hover / :focus / :pressed / :disabled pseudo-states.
• Native animations by default. transition, @keyframes, and @starting-style run on React Native through the built-in Animated-based adapter, with no setup or peer dependency. An optional reanimated adapter is available behind one import (experimental; not heavily tested yet).
• createTheme() on native, with the same contract as web. <ThemeProvider> deep-merges nested themes so an inner override that touches one leaf keeps the siblings it inherited.
• Dedicated react-native-web build. styled-components/native ships a smaller bundle for rn-web targets that defers to the browser for light-dark() + prefers-color-scheme repaints, distinct dvh / svh / lvh / vi / vb resolution, wide-gamut oklch / oklab / lch / lab / color-mix(), and paint-time calc() / clamp() / min() / max() against the real containing block. Webpack, Vite, and Metro web targets detect it automatically; other bundlers can import styled-components/native/web-bridge directly.
• Plugins subpath. import { prefixPlugin, rtlPlugin, rscPlugin } from 'styled-components/plugins'. First-party RTL replaces stylis-plugin-rtl, and opt-in prefixPlugin restores vendor prefixing at React's browser support floor; custom plugins move to a narrower SCPlugin interface. See Plugins moved to a dedicated subpath.
• extractCSS() reads the current stylesheet as plain text. Replaces the legacy disableCSSOMInjection toggle.
• Global styles emit once. Mounting the same createGlobalStyle component multiple times now emits its CSS only once.
• Remapping CSS into native props via the function form of .attrs((props, ast) => ...). Most useful for React Native libraries that style via props (e.g. react-native-svg's <Path fill="..." />, Image's tintColor, icon libraries). Details →
• Polymorphic target autocomplete. With <Component as="video" ...>, editors complete the target element's attributes such as loop, muted, controls, and poster.
• Faster SSR at scale.

Peer dependency floors

• react and react-dom ≥ 19.0.0
• react-native ≥ 0.85.0 (optional peer)
• react-native-reanimated ≥ 4.0.0 (optional peer, only required if you opt into the reanimated animation adapter)

Older React or React Native projects should stay on v6.

Migrating from v6

Most v6 apps move to v7 by bumping the version, updating peers, and applying a few small changes. The list below is exhaustive; pick out the items that apply.

Install the current v7 prerelease with npm install styled-components@test.

Update peers

• react and react-dom to ^19.
• react-native to ^0.85 if you use it.
• react-native-reanimated to ^4 if you opt into the native animation adapter.
• Drop css-to-react-native if it was in your package.json only for styled-components.

defaultProps is no longer honored

React 19 removed defaultProps from function components, so styled components can no longer inherit them either. Use .attrs() for prop defaults and <ThemeProvider> for default themes.

// Before (v6, no longer applies in v7)
const Button = styled.button``;
Button.defaultProps = { type: 'button' };


// After: object form always wins
const Button = styled.button.attrs({ type: 'button' })``;


// After: function form lets user props override
const Button = styled.button.attrs<{ type?: string }>(p => ({
  type: p.type ?? 'button',
}))``;

disableCSSOMInjection and SC_DISABLE_SPEEDY removed; use extractCSS()

The browser build always uses the fast injection path. If you were toggling into a slower text-based mode to read the CSS as a string (for static-render pipelines, micro-frontend cloning, embedding into iframes or Shadow DOM), call the new extractCSS():