Why styled-components still remains a convenient choice for React

Think back to what layout looked like in React about seven years ago. We tried in vain to isolate CSS classes through BEM, then moved to CSS Modules, and then styled-components came along. The idea of writing styles directly in JS files seemed wild at first. JavaScript template literals quickly turned this approach into one of the web development standards.

Now Tailwind CSS and atomic CSS frameworks are popular. Meanwhile, the styled-components repository has garnered over 41 thousand stars on GitHub and continues to be updated. Developers actively use it for layout, and the project's maintainers adapt the code for current React features, including React Server Components (RSC).

Why replace familiar CSS with tagged templates

The library's concept is straightforward: you create a React component that already contains all the necessary styles. There's no need to devise a complex class hierarchy or worry that base button styles might accidentally break a modal on the other side of the app.

The syntax remains clean CSS without quotes and commas after every line:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.$primary ? "#0070f3" : "#ffffff"};
  color: ${props => props.$primary ? "#ffffff" : "#0070f3"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #0070f3;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div>
      <Button>Обычная кнопка</Button>
      <Button $primary>Акцентная кнопка</Button>
    </div>
  );
}

Styles are tightly bound to the component. Remove Button from the project and its styles disappear with it. No unused code lingers in the final build.

Props, themes, and dynamic appearance

The strong side of CSS-in-JS reveals itself where the visual presentation directly depends on data or application state. With CSS Modules, you'd endlessly toggle classes through the classnames utility. Here, props are passed directly into the style block.

Passing parameters without DOM conflicts

Notice the $primary syntax from the example above. The dollar sign denotes transient props. Variables marked this way are used inside styles, but the library filters them out and doesn't pass them to the final HTML tag. The browser console stays clean without warnings about unknown attributes.

Built-in theming

For working with light and dark themes, there's the ThemeProvider component. It passes the settings object down the component tree using React Context.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    main: '#0070f3',
    background: '#f4f4f4',
  }
};

const Container = styled.div`
  color: ${props => props.theme.colors.main};
  background: ${props => props.theme.colors.background};
`;

Swap out colors in the theme object and the interface updates instantly. This seriously simplifies building your own design systems.

Performance and server-side rendering

The library automatically tracks which components are displayed on the page at any given moment and loads only their styles. The user doesn't download extra code.

Previously, CSS-in-JS solutions were criticized for extra load during hydration and SSR issues. In recent versions, the team rewrote the internal logic. The library can work with streaming SSR and plays nicely with React Server Components. Styles are embedded directly into the HTML stream without delays.

When to use styled-components

Here are four scenarios where the library performs best:

• You're building an internal UI component library or design system with flexible customization.
• The project contains many complex interactive elements whose visual state changes based on input data.
• The team is used to classic CSS syntax but wants reliable style isolation without configuring build tool configs.
• You're writing a cross-platform project with React and React Native, expecting to use a single API for styles.

If your priority is launching the app on low-powered devices with a minimal JS bundle, you might want to look at Tailwind CSS or zero-runtime solutions like Linaria and Pigment CSS.

styled-components remains a clear and predictable solution. The library takes the headache out of naming classes and gives you clean CSS right in the component body. For most frontend tasks, the tool's power is more than enough.