探客时代
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS t...
README
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 (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!
- ``` js
- 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.
- ``` js
- const Button = styled.button({
- color: 'grey',
- });
- ```
Equivalent to:
- ``` js
- 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 for more information.
_Supported by Front End 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.
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](https://www.styled-components.com/docs/basics)
- Theming
Example
- ``` js
- import React from 'react';
- import styled from 'styled-components';
- // Create a
react component that renders an <h1> which is</span></li><li><span>// centered, palevioletred and sized at 1.5em</span></li><li><span class="js-keyword">const</span><span> </span><span class="js-func">Title</span><span> </span><span class="js-operator">=</span><span> </span><span class="js-variable">styled</span><span class="js-variable">.h1</span><span>`</span></li><li><span> </span><span class="js-variable">font</span><span class="js-operator">-</span><span class="js-variable">size</span><span>:</span><span> </span><span class="js-variable">1</span><span class="js-variable">.5em</span><span>;</span></li><li><span> </span><span class="js-variable">text</span><span class="js-operator">-</span><span class="js-variable">align</span><span>:</span><span> </span><span class="js-variable">center</span><span>;</span></li><li><span> </span><span class="js-variable">color</span><span>:</span><span> </span><span class="js-variable">palevioletred</span><span>;</span></li><li><span>`</span><span>;</span></li><li><br></li><li><span>// Create a <Wrapper> react component that renders a <section> with</span></li><li><span>// some padding and a papayawhip background</span></li><li><span class="js-keyword">const</span><span> </span><span class="js-func">Wrapper</span><span> </span><span class="js-operator">=</span><span> </span><span class="js-variable">styled</span><span class="js-variable">.section</span><span>`</span></li><li><span> </span><span class="js-variable">padding</span><span>:</span><span> </span><span class="js-variable">4em</span><span>;</span></li><li><span> </span><span class="js-variable">background</span><span>:</span><span> </span><span class="js-variable">papayawhip</span><span>;</span></li><li><span>`</span><span>;</span></li><li><br></li><li><span>// Use them like any other React component – except they're styled!</span></li><li><span class="js-operator"><</span><span class="js-func">Wrapper</span><span class="js-operator">></span></li><li><span> </span><span class="js-operator"><</span><span class="js-func">Title</span><span class="js-operator">></span><span class="js-func">Hello</span><span> </span><span class="js-func">World</span><span>,</span><span> </span><span class="js-obj">this</span><span> </span><span class="js-variable">is</span><span> </span><span class="js-variable">my</span><span> </span><span class="js-variable">first</span><span> </span><span class="js-variable">styled</span><span> </span><span class="js-variable">component</span><span class="js-operator">!<</span><span>/</span><span class="js-func">Title</span><span class="js-operator">></span></li><li><span class="js-operator"><</span><span>/</span><span class="js-func">Wrapper</span><span class="js-operator">></span></li><li><span>`</span><span>`</span><span>`</span></li></ol></div><div class="base"><br></div><div class="base">This is what you'll see in your browser:</div><div class="base"><br></div><div align="center"> <a href="https://styled-components.com" target="_blank" rel="nofollow noopener noreferrer"> <img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" /> </a></div><div class="base"><br></div><div class="base"><h2>Babel Macro</h2></div><div class="base"><br></div><div class="base">If you're using tooling that has babel-plugin-macros set up, you can switch to the <span class="edit-backquote">styled-components/macro</span> import path instead to gain the effects of the babel plugin without further setup.</div><div class="base"><br></div><div class="code"><ol start="0"><li><span>`</span><span>`</span><span>`</span><span> </span><span class="js-variable">js</span></li><li><span class="js-keyword">import</span><span> </span><span class="js-variable">styled</span><span> </span><span class="js-keyword">from</span><span> </span><span class="js-string">'styled-components/macro'</span><span>;</span></li><li><br></li><li><span>// A static className will be generated for Title (important for SSR)</span></li><li><span class="js-keyword">const</span><span> </span><span class="js-func">Title</span><span> </span><span class="js-operator">=</span><span> </span><span class="js-variable">styled</span><span class="js-variable">.h1</span><span>`</span></li><li><span> </span><span class="js-variable">font</span><span class="js-operator">-</span><span class="js-variable">size</span><span>:</span><span> </span><span class="js-variable">1</span><span class="js-variable">.5em</span><span>;</span></li><li><span> </span><span class="js-variable">text</span><span class="js-operator">-</span><span class="js-variable">align</span><span>:</span><span> </span><span class="js-variable">center</span><span>;</span></li><li><span> </span><span class="js-variable">color</span><span>:</span><span> </span><span class="js-variable">palevioletred</span><span>;</span></li><li><span>`</span><span>;</span></li><li><span>`</span><span>`</span><span>`</span></li></ol></div><div class="base"><br></div><div class="base">If you wish to provide configuration options to the babel plugin similar to how you would in a <span class="edit-backquote">.babelrc</span>, <a href="https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#config-experimental" title="see this guide" target="_blank" rel="nofollow noopener noreferrer">see this guide</a>. The config name is<span class="edit-backquote">"styledComponents"</span>.</div><div class="base"><br></div><div class="base"><h2>Built with <span class="edit-backquote">styled-components</span></h2></div><div class="base"><br></div><div class="base">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.</div><div class="base"><br></div><div class="base">Make sure to head over to <a href="https://github.com/styled-components/awesome-styled-components" title="awesome-styled-components" target="_blank" rel="nofollow noopener noreferrer">awesome-styled-components</a> to see them all! And please contribute and add your own work to the list so others can find it.</div><div class="base"><br></div><div class="base"><h2>Contributing</h2></div><div class="base"><br></div><div class="base">If you want to contribute to <span class="edit-backquote">styled-components</span> please see our <a href="https://github.com/styled-components/styled-components/blob/master/CONTRIBUTING.md" title="contributing and community guidelines" target="_blank" rel="nofollow noopener noreferrer">contributing and community guidelines</a>, they'll help you get set up locally and explain the whole process.</div><div class="base"><br></div><div class="base">Please also note that all repositories under the <span class="edit-backquote">styled-components</span> organization follow our <a href="https://github.com/styled-components/styled-components/blob/master/CODE_OF_CONDUCT.md" title="Code of Conduct" target="_blank" rel="nofollow noopener noreferrer">Code of Conduct</a>, make sure to review and follow it.</div><div class="base"><br></div><div class="base"><h2>Badge</h2></div><div class="base"><br></div><div class="base">Let everyone know you're using _styled-components_ → <a href="https://github.com/styled-components/styled-components" title="style: styled-components" target="_blank" rel="nofollow noopener noreferrer"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e" alt="style: styled-components"/></a></div><div class="base"><br></div><div class="code"><ol start="0"><li><span>`</span><span>`</span><span>`</span><span class="js-variable">md</span><span> </span><span>[</span><span class="js-operator">!</span><span>[</span><span class="js-variable">style</span><span>:</span><span> </span><span class="js-variable">styled</span><span class="js-operator">-</span><span class="js-func">components</span><span>]</span><span>(</span><span class="js-func">https</span><span>:</span><span>//img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)</span></li><li><span>`</span><span>`</span><span>`</span></li></ol></div><div class="base"><br></div><div class="base"><h2>Contributors</h2></div><div class="base"><br></div><div class="base">This project exists thanks to all the people who contribute. <a href="https://github.com/styled-components/styled-components/blob/master/CONTRIBUTING.md" title="[Contribute" target="_blank" rel="nofollow noopener noreferrer">[Contribute</a>].</div><a href="https://github.com/styled-components/styled-components/graphs/contributors" target="_blank" rel="nofollow noopener noreferrer"><img src="https://opencollective.com/styled-components/contributors.svg?width=890" /></a><div class="base"><br></div><div class="base"><h2>Backers</h2></div><div class="base"><br></div><div class="base">Thank you to all our backers! 🙏 <a href="https://opencollective.com/styled-components#backer" title="[Become a backer" target="_blank" rel="nofollow noopener noreferrer">[Become a backer</a>]</div><div class="base"><br></div><a href="https://opencollective.com/styled-components#backers" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a><div class="base"><br></div><div class="base"><h2>Sponsors</h2></div><div class="base"><br></div><div class="base">Support this project by becoming a sponsor. Your logo will show up here with a link to your website. <a href="https://opencollective.com/styled-components#sponsor" title="[Become a sponsor" target="_blank" rel="nofollow noopener noreferrer">[Become a sponsor</a>]</div><div class="base"><br></div><a href="https://opencollective.com/styled-components/sponsor/0/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/0/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/1/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/1/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/2/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/2/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/3/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/3/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/4/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/4/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/5/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/5/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/6/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/6/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/7/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/7/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/8/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/8/avatar.svg"></a><a href="https://opencollective.com/styled-components/sponsor/9/website" target="_blank" rel="nofollow noopener noreferrer" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/9/avatar.svg"></a><div class="base"><br></div><div class="base"><h2>License</h2></div><div class="base"><br></div><div class="base">Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.</div><div class="base"><br></div><div class="base">See <a href="https://github.com/styled-components/styled-components/blob/master/LICENSE" title="LICENSE" target="_blank" rel="nofollow noopener noreferrer">LICENSE</a> for more information.</div><div class="base"><br></div><div class="base"><h2>Acknowledgements</h2></div><div class="base"><br></div><div class="base">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.</div><div class="base"><br></div><div class="base">Special thanks to <a href="https://github.com/okonet" title="@okonet" target="_blank" rel="nofollow noopener noreferrer">@okonet</a> for the fantastic logo.</div><div class="base"><br></div></div></div></div><div id="footer"><div class="footer-box"><div class="footer-info"><div class="fi-logo"><img src="/img/footer-logo.png" width="65"/></div><div class="fi-intro"><strong>为什么是最好的 GitHub 项目？</strong><p>技术的发展速度比以往任何时候都快，技术正在全速创新。几乎每天都会发布惊人的开源项目。</p><p><br/></p><strong>如何了解最新趋势？</strong><p>如何快速检查真正重要的项目，现在而不是 6 个月前？</p><p>探客时代每天拍摄 GitHub stars 的 “快照”，以获得 2000 多个项目的精选列表，以检测过去几个月的趋势。</p><p><br/></p><strong>你想要更多的项目吗？</strong><p>我们不会扫描 GitHub 上的所有现有项目，而是根据我们的经验和我们在 Internet 上阅读的内容，专注于我们发现 “有趣” 的精选项目列表。想要了解的项目可以提交给我们。</p></div><div class="fi-qrcode"><h3>关注公众号</h3><img src="/img/qrcode.jpg" width="272" height="272"/></div></div><div class="footer-copyright">© 2022, 北京探客时代网络科技有限公司 <br/><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">京 ICP 备 2022008592 号</a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012574" target="_blank" rel="nofollow noopener noreferrer">京公网安备 11011402012574 号</a> <a href="contact.html" target="_blank" rel="nofollow noopener noreferrer">信息举报</a></div></div></div><script>function request(t,e,n){$.ajax({url:t,type:"get",data:e,dataType:"json",success:function(t){n(t.data)}})}function levenshtein(t,e){t=t.toLowerCase(),e=e.toLowerCase();for(var n=t.length,o=e.length,i=[],a=0;a<n+1;a++)i.push(new Array(o+1));for(a=0;a<=n;a++)i[a][0]=a;for(a=0;a<=o;a++)i[0][a]=a;var l,s=t.split(""),r=e.split("");for(a=1;a<=n;a++)for(var c=1;c<=o;c++){l=s[a-1]==r[c-1]?0:1;var u=i[a-1][c-1]+l,h=i[a][c-1]+1,f=i[a-1][c]+1;i[a][c]=Math.min(u,h,f)}return 1-i[n][o]/Math.max(t.length,e.length)}$(function(){var t=[],e=[];request("https://api.tkcnn.com/gh/tag/all",null,function(e){t=e;var n=window.location.href.match(/([\w-]+)\.html/);if(n){var o=t.find(t=>t.code===n[1]);o&&$(".select-set").val(o.name)}}),$(".select-set").on("click input",function(){var n=$(this).val();if(n=n.replace(/(^\s+|\s+$)/g,""),e=[],""===n.replace(/s/g,""))e=t;else{for(var o,i=0;i<t.length;i++)(o=levenshtein(n,t[i].name))>=.1&&e.push({name:t[i].name,code:t[i].code,count:t[i].count,similar:o});e.sort(function(t,e){return e.similar-t.similar})}var a="";for(i=0;i<e.length;i++)a+=`<button>${e[i].name} (${e[i].count})</button>`;$(".select-list").html(a)}),$(".select-list").on("click","button",function(t){$(".select-list").hide(),setTimeout(function(){$(".select-list").css("display","")},200),window.location.href=window.location.origin+`/repo/${e[$(this).index()].code}.html`})});</script></body></html>