styled-components v7: unprefixed CSS by default, token themes for server components, and a plugin API

Transient props with a $ prefix stay off the DOM

Styles vary with component props, and the type parameter on the tag carries those props through to the interpolations with full inference. Prefix a styling-only prop with $ and it is kept off the rendered DOM element:

import styled from 'styled-components';

const Button = styled.button<{ $primary?: boolean }>`
  background: ${props => (props.$primary ? 'palevioletred' : 'white')};
  color: ${props => (props.$primary ? 'white' : 'palevioletred')};
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

<Button>Normal</Button>
<Button $primary>Primary</Button>

Types ship inside the package, so there is no separate @types install. styled(Button) builds a variant on top of an existing component, and the as prop swaps the rendered element, for example rendering Button as an anchor with an href, without changing its styles.

The & selector and scoped keyframes replace hand-managed class names

Inside a template, & refers to the class name styled-components generates for that component. That one reference covers pseudo-classes, pseudo-elements and nested selectors, so focus and placeholder styles sit next to the base rules instead of in a separate stylesheet:

const Input = styled.input`
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;

  &:focus {
    border-color: palevioletred;
    outline: none;
  }

  &::placeholder {
    color: #aaa;
  }
`;

Animations follow the same idea. The keyframes helper defines an animation once and returns a value you interpolate into any component's animation property; the generated name is scoped automatically, so two libraries that both call their animation rotate do not collide. Because class names are generated rather than written, you never pick, share or document them by hand, which is the trade the library makes: you give up readable class names in the DOM in exchange for scoping that does not depend on naming discipline. Note that the ::placeholder rule in this example is one of the properties that needs prefixPlugin for older browsers under v7.

Vendor prefixes are now opt-in, and enableVendorPrefixes is gone

CSS is emitted unprefixed by default. Browsers that need prefixed forms of properties such as appearance, user-select or ::placeholder only get them if you add prefixPlugin to a StyleSheetManager around the relevant subtree:

import { StyleSheetManager } from 'styled-components';
import { prefixPlugin } from 'styled-components/plugins';

<StyleSheetManager plugins={[prefixPlugin]}>
  <App />
</StyleSheetManager>;

The bundled prefix set targets Chrome 45, Firefox 36, Safari and iOS 9, and Edge 12, the floor for the JavaScript APIs React needs. The enableVendorPrefixes prop from v6 has been removed in favour of this plugin, so a v6 codebase that relied on it will silently stop emitting prefixes after the upgrade until the plugin is added.

Custom plugins run left to right over every declaration

When the bundled prefixes are not the set you need, either write both prefixed and standard forms yourself or add your own plugin next to prefixPlugin. The types SCPlugin, DeclResult, DeclTransform and SelectorTransform are exported only from styled-components/plugins, not from the package root, so an import from the root fails. Plugins apply left to right, and a later decl hook runs on every declaration an earlier plugin emitted. Returning undefined on the miss path passes the declaration through untouched and keeps a plugin cheap. Skipping properties that already start with a hyphen, as prefixPlugin does, lets plugins compose in either order without double prefixing.

createTheme tokens are CSS variables, not numbers

ThemeProvider shares design tokens through React context, and every styled component receives props.theme. For server components there is createTheme, which turns tokens into CSS custom properties. Class name hashes stay stable across theme variants, so switching between light and dark does not cause a hydration mismatch, and theme.GlobalStyle emits the :root variable declarations. The catch is that a token such as theme.space.md is a placeholder reference resolved at render time, not the raw value. Interpolating it anywhere a CSS value goes works; combining it with JavaScript arithmetic produces a malformed string. Use calc() for runtime composition, or theme.raw.space.md when you need the original number in JavaScript:

// works
padding: ${theme.space.md};
margin: ${theme.space.sm} ${theme.space.md};
top: calc(${insets.top}px + ${theme.space.md});

Version 7 is shipping as dated prereleases from a largely one-person project

The newest GitHub releases are all 7.0.0 prereleases, named by timestamp: two on 3 November 2026 and one on 19 October 2026. The last push to main was on 29 October 2026. The repository is a pnpm workspace with the library under packages/, changesets for release notes, Biome for formatting, and an engines field of node >= 14. The project says it is largely maintained by one person and asks for funding through Open Collective. For teams depending on it, that is a real support consideration alongside the v6 to v7 changes above.

One npm package with no build plugin

The library installs from npm with any of the three common package managers, and no build step or build plugin is required:

npm install styled-components

pnpm add styled-components

yarn add styled-components

The same API covers server components, client components, streaming SSR and React Native, with the runtime detected automatically. Media queries, pseudo-selectors, nesting with &, keyframes with automatically scoped names, and global styles are all supported. There is no separate CSS file to import or keep in sync: styles are delivered only when the components that use them render, and the package size badge on the README tracks the current minified and gzipped size rather than quoting a fixed number. For contributors, the repository root runs pnpm scripts such as build, test, format with Biome and verify, all filtered to the styled-components package.

Editorial conclusion

styled-components suits React teams that want real CSS written next to components, typed props without an @types package, and one API across server components, SSR and React Native. Projects that must support old browsers should plan for the opt-in prefixPlugin before moving to v7, since enableVendorPrefixes is gone. Check that you are installing a stable release rather than a 7.0.0 prerelease, and be aware that the project is largely maintained by one person.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. styled-components/styled-components on GitHub