styled-components中文文档翻译及不完全指南

前言官方文档地址：https://www.styled-components.com/中文文档地址：https://github.com/hengg/styled-components-docs-zhstyled-components是React的第三方库，是CSS在JS中的一个很好的实践。第一次了解styled-components是在看林浩翻译的《ReactDesignPatternsandBestPractices》一书时。虽然接触的比较晚，但还是被它的刚劲和优雅深深吸引了。但是，它的中文资料比较匮乏。为了帮助更多的朋友了解这个强大的工具，对部分官方文档进行了翻译。由于能力有限，翻译部分可能还存在一些单词错误或句子不准确的地方。欢迎有能力的同学帮忙指正。样式组件的优势是什么？这就要从它解决的问题说起：CSS的痛点是不可否认的，CSS是一门神奇的“语言”（CSS是一种什么样的语言？）。它很容易学习，但很难掌握。它没有变量和函数等概念，这使得它的表达能力比其他语言稍弱，它要解决的问题也非常复杂。关于这一点，为什么CSS这么难学？这个问题的100多个答案很能说明问题。在日常使用中，CSS的痛点很多，但大部分都围绕着以下两点：全局污染：CSS选择器的作用域是全局的，容易造成选择器冲突；并且为了避免全局冲突，会导致类命名复杂复用性低：CSS缺乏抽象机制，选择器容易重复，不利于CSS在JS中的维护和复用随着组件时代的到来、前端应用从组件层面开始对CSS进行封装：也就是通过JS来声明和抽象样式，提高组件的可维护性；组件加载时，动态加载样式，动态生成类名，避免全局污染。styled-components是最好的组件之一。顾名思义，styled-components就是以组件的形式来声明样式，让样式成为组件来分离逻辑组件和显示组件（这个思路是不是很眼熟），我们来看一下官方的例子：constButton=styled.a`/*这会呈现上面的按钮...编辑我！*/显示：内联块；边界半径：3px；填充：0.5rem0；保证金：0.5rem1rem；宽度：11rem；;边框：2px纯白色；/*GitHub按钮是一个主要按钮*编辑它以专门针对它！*/${props=>props.primary&&css`background:white;颜色：淡紫红色；`}`render(

)可以看到，styled-components通过tagged模板字符来设置组件的样式。它删除了组件和样式之间的映射。当我们通过styled-组件定义样式时，我们实际上创建了一个带有附加样式的常规React组件。同时支持以插值的形式向组件传递props来调整组件样式。官方公告styled-component的优点如下：自动关键CSS：styled-components跟踪页面上呈现的组件，并自动注入和仅注入样式。结合代码拆分，可以只加载所需的最少代码。解决类名冲突：styled-components为样式生成唯一的类名。开发者再也不用担心类名重复、覆盖和拼写错误。CSS更容易去除：想确切知道代码中某个类的使用位置很难。使用styled-components这很容易，因为每种样式都有其关联的组件。如果检测到某个组件未使用并被删除，则其所有样式也将被删除。简单动态样式：根据组件props或全局主题实现样式适配，非常简单直观，无需手动管理几十个类。无痛维护：无需搜索不同的文件来查找影响组件的样式。再大的代码，维护起来也很容易自动提供前缀是小菜一碟：按照现在的标准写CSS，剩下的交给styled-components。题外话CSS问题，还有其他解决方案，比如大名鼎鼎的CSSModule解决方案。社区中也一直存在关于两者哪个更好的争论。本文不会比较这两种方案，有兴趣的朋友可以参考这两篇文章：StyledComponents:ToUseorNottoUse?停止在JavaScript中使用CSS进行Web开发