Skip to main content

CSS-in-JS with styled-components: Modern React Styling

CSS-in-JS is a pattern where CSS is composed in JavaScript instead of external .css files, allowing you to write styles directly alongside your React components. styled-components is the most popular library implementing this pattern. It uses JavaScript tagged template literals to create components with automatically scoped, vendor-prefixed styles that can change dynamically based on props and state—eliminating class name collisions entirely.

Key Takeaways​

  • CSS-in-JS writes styles inside JavaScript: Styles live in the same file as component logic, making them easier to maintain and refactor.
  • Automatic scoping prevents collisions: Each styled component gets a unique generated class name, so you never have naming conflicts.
  • Dynamic styling is straightforward: Adapt styles using props and state within the same JavaScript context.
  • styled-components generates unique class names: At runtime, the library injects scoped CSS into the document head automatically.
  • Co-location improves productivity: Delete a component and its styles vanish; no orphaned CSS.

What is CSS-in-JS and Why Use It?​

CSS-in-JS is a design pattern where CSS is composed using JavaScript instead of being defined in separate .css files. Instead of mapping styles to components via a className, the component itself becomes the style. Libraries like styled-components let you define and apply CSS directly in your component file.

Key Benefits:

  • True Scoping: Styles are automatically scoped to the component. There is zero risk of class name collisions or unintended cascade.
  • Dynamic Styling: You can intuitively use props and state to change a component's styles because styles are defined in the same JavaScript context.
  • Painless Maintenance: All styling for a component lives in the same file as the component logic. Find, change, or delete styles instantly. Deleting a component deletes its styles automatically.
  • Vendor Prefixing: The library automatically handles vendor prefixes (-webkit-, -moz-, etc.), so you write modern CSS without worrying about cross-browser compatibility.
  • Better Performance: Styles are injected at runtime with unique class names, allowing caching and code-splitting benefits.

Getting Started with styled-components​

styled-components is the most popular CSS-in-JS library for React. It uses JavaScript tagged template literals—a feature that looks unusual but is straightforward once you understand the syntax.

Installing styled-components​

First, add the library to your project:

npm install styled-components

Creating Your First Styled Component​

You create a component by calling styled followed by a dot and the HTML tag you want (e.g., styled.h1, styled.button, styled.div). Immediately after, write your CSS inside backticks.

Here's a simple example with a styled heading and a wrapper:

// MyApp.jsx
import React from 'react';
// Step 1: Import the 'styled' object from the library
import styled from 'styled-components';

// Step 2: Create a component that will render an <h1> tag
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

// Step 3: Create another component that will render a <section> tag
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Step 4: Use the components like any other React component
function MyApp() {
  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}

export default MyApp;

Code Breakdown:

  1. import styled from 'styled-components'; — Import the default export from the library.
  2. const Title = styled.h1... — Create a React component named Title that always renders an <h1> element. The CSS inside the backticks applies directly to it.
  3. const Wrapper = styled.section... — Create a Wrapper component that renders a <section> with its own styles.
  4. <Wrapper> and <Title> in JSX — Use these as regular React components. The library creates the elements and applies scoped styles with unique generated class names behind the scenes.

How styled-components Works Under the Hood​

styled-components performs these steps at build time and runtime:

  1. Takes the CSS you write inside the template literal.
  2. Generates a unique CSS class name (e.g., sc-a1b2c3d4-0).
  3. Injects that CSS into the document's <head> with the unique class name.
  4. Ensures your component receives that unique class name so styles apply correctly.

This process gives you the best of both worlds: traditional CSS benefits (caching, performance) and inline style benefits (scoping, dynamic capability) without the major drawbacks of either.

Best Practices for Styled Components​

  • Define styled components at module level: Always define them outside render functions or other components. Defining them inside a render function causes recreation on every render, destroying performance and breaking caching.
  • Use descriptive names: Name styled components clearly: PageWrapper, SubmitButton, ErrorMessage. This makes JSX more readable than a bare div with a className.
  • Start with main blocks: Don't style every single element as a styled component initially. Style the major "blocks" of your UI first, then add finer-grained components as needed.
  • Keep them simple: If a styled component becomes too complex (hundreds of lines), split its logic into smaller components or consider using CSS-in-JS utilities like css helper for reusable style snippets.

Frequently Asked Questions​

What's the difference between styled-components and regular CSS Modules?​

CSS Modules scope styles by file and require explicit class imports; styled-components scopes styles at the component level within JavaScript. CSS Modules are better if you want to keep CSS and JavaScript separate; styled-components excel when you want dynamic styles, co-location, and to eliminate class names entirely from your component files.

Can I use pseudo-selectors like :hover with styled-components?​

Yes. Write them directly inside the template literal like regular CSS: &:hover { color: blue; }. The & refers to the component itself. You can also nest selectors for child elements: & > p { margin: 0; }.

Does styled-components add to my bundle size?​

Yes, but it's often negligible. The library itself is about 16 KB gzipped. If you're using CSS Modules or external CSS files, the total size is often similar or smaller with styled-components because you eliminate the CSS file HTTP requests and get better code-splitting. Use bundle analysis tools if size is critical.

Can I extend or inherit styles from another styled component?​

Yes, using the styled() function. For example: const ExtendedButton = styled(Button) followed by additional CSS rules. This is useful for creating component variants without repeating styles.

Should I use styled-components for all my components?​

Not necessarily. Use styled-components for components where you need dynamic styles, scoping, or co-location. For simple presentational components with no styling or static styles, a basic component is fine. The choice depends on your project structure and team preferences.

Conclusion​

CSS-in-JS with styled-components offers a fundamentally modern approach to React styling. By binding styles directly to components, you create a more modular, maintainable, and error-proof system. Styles are automatically scoped, vendor-prefixed, and can be dynamic—all with a clean, readable syntax. Start with this first article to master the basics, then explore advanced patterns in part 2.

Further Reading​