<ahref="#backers"alt="sponsors on Open Collective"><imgsrc="https://opencollective.com/styled-components/backers/badge.svg"/></a><ahref="#sponsors"alt="Sponsors on Open Collective"><imgsrc="https://opencollective.com/styled-components/sponsors/badge.svg"/></a><ahref="https://discord.gg/hfGUrbrxaU">
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[taggedtemplateliterals](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
constButton=styled.button`
color:grey;
`;
```
Alternatively,youmayuse[styleobjects](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
constButton=styled.button({
color:'grey',
});
```
Equivalentto:
```jsx
constButton=styled.button`
color:grey;
`;
```
`styled-components`iscompatiblewithbothReact(forweb)andReactNativeโmeaningit'stheperfectchoiceevenfortrulyuniversalapps!Seethe[documentationaboutReactNative](https://www.styled-components.com/docs/basics#react-native) for more information.
_Supportedby[FrontEndCenter](https://frontend.center). Thank you for making this possible!_
// A static className will be generated for Title (important for SSR)
constTitle=styled.h1`
font-size:1.5em;
text-align:center;
color:palevioletred;
`;
```
Ifyouwishtoprovideconfigurationoptionstothebabelpluginsimilartohowyouwouldina`.babelrc`, [see this guide](https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#config-experimental). The config name is `"styledComponents"`.
Makesuretoheadoverto[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.