1 | <div align="center">
|
2 | <a href="https://www.styled-components.com">
|
3 | <img alt="styled-components" src="https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png" height="150px" />
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | <br />
|
8 |
|
9 | <div align="center">
|
10 | <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π
</strong>
|
11 | <br />
|
12 | <br />
|
13 | <a href="https://www.npmjs.com/package/styled-components"><img src="https://www.styled-components.com/proxy/downloads.svg" alt="downloads: 600k/month"></a>
|
14 | <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/styled-components/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/styled-components/sponsors/badge.svg" /></a> <a href="https://spectrum.chat/styled-components"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"></a>
|
15 | <img src="https://www.styled-components.com/proxy/size.svg" alt="gzip size">
|
16 | <a href="#alternative-installation-methods"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg" alt="module formats: umd, cjs, esm"></a>
|
17 | </div>
|
18 |
|
19 | <br />
|
20 | <br />
|
21 |
|
22 | Utilising [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` 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!
|
23 |
|
24 | `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.
|
25 |
|
26 | _Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_
|
27 |
|
28 | ## [Docs](https://www.styled-components.com/docs)
|
29 |
|
30 | **See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!
|
31 |
|
32 | Quicklinks to some of the most-visited pages:
|
33 |
|
34 | - [**Getting started**](https://www.styled-components.com/docs/basics)
|
35 | - [API Reference](https://styled-components.com/docs/api)
|
36 | - [Theming](https://www.styled-components.com/docs/advanced#theming)
|
37 | - [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
|
38 | - [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals)
|
39 |
|
40 | ## Example
|
41 |
|
42 |
|
43 | ```JSX
|
44 | import React from 'react';
|
45 |
|
46 | import styled from 'styled-components';
|
47 |
|
48 | // Create a <Title> react component that renders an <h1> which is
|
49 | // centered, palevioletred and sized at 1.5em
|
50 | const Title = styled.h1`
|
51 | font-size: 1.5em;
|
52 | text-align: center;
|
53 | color: palevioletred;
|
54 | `;
|
55 |
|
56 | // Create a <Wrapper> react component that renders a <section> with
|
57 | // some padding and a papayawhip background
|
58 | const Wrapper = styled.section`
|
59 | padding: 4em;
|
60 | background: papayawhip;
|
61 | `;
|
62 |
|
63 | // Use them like any other React component β except they're styled!
|
64 | <Wrapper>
|
65 | <Title>Hello World, this is my first styled component!</Title>
|
66 | </Wrapper>
|
67 | ```
|
68 |
|
69 | This is what you'll see in your browser:
|
70 |
|
71 | <div align="center">
|
72 | <a href="https://styled-components.com">
|
73 | <img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" />
|
74 | </a>
|
75 | </div>
|
76 |
|
77 | ## Babel Macro
|
78 |
|
79 | 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.
|
80 |
|
81 | ```js
|
82 | import styled from 'styled-components/macro';
|
83 |
|
84 | // A static className will be generated for Title (important for SSR)
|
85 | const Title = styled.h1`
|
86 | font-size: 1.5em;
|
87 | text-align: center;
|
88 | color: palevioletred;
|
89 | `;
|
90 | ```
|
91 |
|
92 | 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/master/other/docs/author.md#config-experimental). The config name is `"styledComponents"`.
|
93 |
|
94 | ## Built with `styled-components`
|
95 |
|
96 | 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βs also a whole lot of interesting apps and sites that people have built using styled-components.
|
97 |
|
98 | 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.
|
99 |
|
100 | ## Contributing
|
101 |
|
102 | 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.
|
103 |
|
104 | 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.
|
105 |
|
106 | ## Badge
|
107 |
|
108 | 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)
|
109 |
|
110 | ```md
|
111 | [![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)
|
112 | ```
|
113 |
|
114 | ## Contributors
|
115 |
|
116 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
117 | <a href="https://github.com/styled-components/styled-components/graphs/contributors"><img src="https://opencollective.com/styled-components/contributors.svg?width=890" /></a>
|
118 |
|
119 | ## Backers
|
120 |
|
121 | Thank you to all our backers! π [[Become a backer](https://opencollective.com/styled-components#backer)]
|
122 |
|
123 | <a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
|
124 |
|
125 | ## Sponsors
|
126 |
|
127 | 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)]
|
128 |
|
129 | <a href="https://opencollective.com/styled-components/sponsor/0/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/0/avatar.svg"></a>
|
130 | <a href="https://opencollective.com/styled-components/sponsor/1/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/1/avatar.svg"></a>
|
131 | <a href="https://opencollective.com/styled-components/sponsor/2/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/2/avatar.svg"></a>
|
132 | <a href="https://opencollective.com/styled-components/sponsor/3/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/3/avatar.svg"></a>
|
133 | <a href="https://opencollective.com/styled-components/sponsor/4/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/4/avatar.svg"></a>
|
134 | <a href="https://opencollective.com/styled-components/sponsor/5/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/5/avatar.svg"></a>
|
135 | <a href="https://opencollective.com/styled-components/sponsor/6/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/6/avatar.svg"></a>
|
136 | <a href="https://opencollective.com/styled-components/sponsor/7/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/7/avatar.svg"></a>
|
137 | <a href="https://opencollective.com/styled-components/sponsor/8/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/8/avatar.svg"></a>
|
138 | <a href="https://opencollective.com/styled-components/sponsor/9/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/9/avatar.svg"></a>
|
139 |
|
140 | ## License
|
141 |
|
142 | Licensed under the MIT License, Copyright Β© 2016-present Glen Maddern and Maximilian Stoiber.
|
143 |
|
144 | See [LICENSE](./LICENSE) for more information.
|
145 |
|
146 | ## Acknowledgements
|
147 |
|
148 | 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.
|
149 |
|
150 | Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.
|