Styled Components 是一种 React 下的 css in js 方案。基于 js 的 tagged templates 特性实现。tagged template 是 template literal (template strings) 的一种特殊形式，允许传递自定义的字符串解析函数。
其好处很明显有这样一些：
- 在 JS 里面直接写 CSS 对于熟悉 CSS 的程序员来说更容易，不用使用 React 的 style api，语法上无转换成本。
- 更符合组件化的文件管理方式。组件自带样式，添加或者删除都比较容易，不用到全局样式文件里去找。
- 生成的 CSS 自带作用域，不担心重复或者冲突。
- CSS 里面可以通过传入组件的 props 变量实现简单的逻辑。
缺点：
- 某些时候生成的 CSS 可能比较冗余，且 class 名字可读性不太好，但有插件可以改善。
- 定义很多 styled component 会生成过多的 HoC，嵌套比较多。且掺杂了太多仅仅是为了样式定义而创建的组件的 jsx, 整体可理解性可能不好。
