Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

--- ## Looking for v5? The `main` branch is under development of the upcoming v6 major version of styled-components. For changes targeting v5, please point your PRs at the `legacy-v5` branch. --- Utilizing [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allow 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! ```jsx const Button = styled.button` color: grey; `; ``` Alternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries. ```jsx const Button = styled.button({ color: 'grey', }); ``` Equivalent to: ```jsx const Button = styled.button` color: grey; `; ``` `styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information. _Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_ ## Upgrading from v4 1. `npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8` 1. ?? 1. Profit! > If you use jest-styled-components, make sure you update that too. ## [Docs](https://www.styled-components.com/docs) **See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`! Quicklinks to some of the most-visited pages: - [**Getting started**](https://www.styled-components.com/docs/basics) - [API Reference](https://styled-components.com/docs/api) - [Theming](https://www.styled-components.com/docs/advanced#theming) - [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering) - [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals) ## Example ```JSX import React from 'react'; import styled from 'styled-components'; // Create a react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a <Wrapper> react component that renders a <section> with // some padding and a papayawhip background const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // Use them like any other React component – except they're styled! <Wrapper> <Title>Hello World, this is my first styled component! ``` This is what you'll see in your browser:

Screenshot of the above code ran in a browser

## Babel Macro If you're using tooling that has babel-plugin-macros set up, you can switch to the `styled-components/macro` import path instead to gain the effects of the babel plugin without further setup. ```js import styled from 'styled-components/macro'; // A static className will be generated for Title (important for SSR) const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; ``` If you wish to provide configuration options to the babel plugin similar to how you would in a `.babelrc`, [see this guide](https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#config-experimental). The config name is `"styledComponents"`. ## Built with `styled-components` A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using styled-components. Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it. ## Contributing If you want to contribute to `styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process. Please also note that all repositories under the `styled-components` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it. ## Badge Let everyone know you're using _styled-components_ → [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) ```md [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) ``` ## Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].

## Backers Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]

## Sponsors Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/styled-components#sponsor)]

## License Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber. See [LICENSE](./LICENSE) for more information. ## Acknowledgements This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration. Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.

	Stars	Issues	Version	Updated	Created
@emotion/react			11.10.6	a month ago	3 years ago
styled-components	38,430	150	5.3.9	7 days ago	7 years ago
styled-jsx	7,370	77	5.1.2	2 months ago	6 years ago

@emotion/react vs styled-components vs styled-jsx

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past