CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.
npm install styled-components---
Upgrading from v5? See the migration guide.
Utilizing tagged template literals (a recent addition to JavaScript) and the power of 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. 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! It also supports React Server Components (RSC) through automatic runtime detection. See the documentation about React Native for more information.
_Supported by Front End Center. Thank you for making this possible!_
---
See the documentation at styled-components.com/docs for more information about using styled-components!
Quicklinks to some of the most-visited pages:
- Getting started
- API Reference
- Theming
- Server-side rendering
- React Server Components (RSC support)
- Tagged Template Literals explained
---
`jsx
import React from 'react';
import styled from 'styled-components';
// Create a
;// Create a react component that renders a with
// some padding and a papayawhip background
const Wrapper = styled.section
;function MyUI() {
return (
// Use them like any other React component – except they're styled!
Hello World, this is my first styled component!
);
}
`This is what you'll see in your browser:
---
Looking for v5?
The
main branch is for the most-current version of styled-components, currently v6. For changes targeting v5, please point your PRs at the legacy-v5 branch.---
Built with
styled-componentsA 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 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, 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, make sure to review and follow it.---
Badge
Let everyone know you're using _styled-components_ → 
`md

``---
This project exists thanks to all the people who contribute. [Contribute].
---
Thank you to all our backers! 🙏 [Become a backer]
---
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
---
Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.
See LICENSE for more information.
---
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 for the fantastic logo.