Documentation

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

Motivation

Installation

Getting Started

Adapting based on props

Extending styles

Styling any component

Passed props

Coming from CSS

Attaching additional props

Animations

React Native

Theming

Server Side Rendering

Performance

Existing CSS

Referring to other components

Style Objects

Accessibility

Refs

Security

Tagged Template Literals

Primary

Helpers

Test Utilities

Supported CSS

TypeScript

Previous APIs

Vite

SWC Plugin

Babel Plugin

Testing

Stylelint

TypeScript Plugin

Syntax Highlighting

Styled Theming

Migration

What do I need to do to migrate to v6?

What do I need to do to migrate to v5?

Styling Patterns

How should I handle dynamic styles?

When to use attrs?

Why should I avoid declaring styled components in the render method?

Can I nest rules?

How can I override styles with higher specificity?

How can I override inline styles?

Can I use css frameworks?

Troubleshooting

Why am I getting HTML attribute warnings?

Why do my DOM nodes have two classes?

Why am I getting a warning about several instances of module on the page?

How do I fix flickering text after server side rendering?

How can I fix issues when using npm link or yarn link?

Missing Declarations for styled-components/native?

General

Which browsers are supported?

I am a library author. Should I bundle styled-components with my library?