媒介
官方文档地点： https://www.styled-components.com/
中文文档地点：https://github.com/hengg/styled-components-docs-zh
styled-components是一个React的第三方库，是CSS in JS的优异实践。
首次相识styled-components是在读林昊翻译的React设想情势与最好实践一书时。虽然打仗的比较晚，但深深的被它的壮大和文雅所吸收。但是个中文材料比较匮乏，为协助更多的小伙伴相识这个壮大的东西，翻译了部份官方文档。才能所限，已翻译部份能够仍有字词毛病或语句不通畅的处所，迎接有才能的同砚协助改正。
styled-components终究强在那里？这要从它所处置惩罚的题目提及：
CSS 的痛点
不可否认，CSS是一门奇异的“言语”（What kind of language is CSS?）。
它易于上手、却难以通晓。它没有变量、函数等观点致使它的表现力要稍弱于别的言语，而它索要处置惩罚的题目却又很庞杂。 关于这一点，为何 CSS 这么难学？这个题目下的一百多个答案就很能申明题目了。
一样平常运用中，CSS 的痛点许多，但大多缭绕以下两点：
- 全局污染：CSS 选择器的作用域是全局的，所以很轻易引发选择器争论；而为了防止全局争论，又会致使类定名的庞杂度上升
- 复用性低：CSS 缺乏笼统的机制，选择器很轻易涌现反复，不利于保护和复用
CSS in JS
跟着组件化时期的降临，前端运用最先从组件的层面临 CSS 举行封装：也就是经由过程 JS 来声明、笼统款式从而进步组件的可保护性；在组件加载时动态的加载款式，动态天生类名从而防止全局污染。
styled-components就是个中的佼佼者。
望文生义，styled-components以组件的情势来声明款式，让款式也成为组件从而星散逻辑组件与展现组件（这个思绪看起来是否是很眼熟），来看一下官方的示例：
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
render(
<div>
<Button
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
primary
>
GitHub
</Button>
<Button as={Link} href="/docs" prefetch>
Documentation
</Button>
</div>
)能够看到，styled-components经由过程标记的模板字符来设置组件款式.
它移除了组件和款式之间的映照.当我们经由过程styled-components定义款式时,我们实际上是创建了一个附加了款式的通例 React 组件.
同时它支撑将props以插值的体式格局传递给组件,以调解组件款式.
官方声称styled-components的长处以下：
- Automatic critical CSS: styled-components 延续跟踪页面上衬着的组件,并向自动其注入且仅注入款式. 连系运用代码拆分, 能够完成仅加载所需的起码代码.
- 处置惩罚了 class name 争论: styled-components 为款式天生唯一的 class name. 开发者没必要再忧郁 class name 反复,掩盖和拼写毛病的题目.
- CSS 更轻易移除: 想要确实的晓得代码中某个 class 在哪儿用到是很难题的. 运用 styled-components 则很轻松, 由于每一个款式都有其关联的组件. 假如检测到某个组件未运用而且被删除,则其所有的款式也都被删除.
- 简朴的动态款式: 能够很简朴直观的完成依据组件的 props 或许全局主题适配款式,无需手动治理数十个 classes.
- 无痛保护: 无需搜刮差别的文件来查找影响组件的款式.不管代码多巨大，保护起来都是小菜一碟。
- 自动供应前缀: 根据当前规范写 CSS,其他的交给 styled-components 处置惩罚.
题外话
CSS 的题目，也有其他处置惩罚计划，比方有名的CSS Module计划。社区中也一向存在关于二者孰优孰劣的争论。
本文不会比较这两种处置惩罚计划，但有兴致的朋侪能够参考一下这两篇文章：
