CSS-in-JS之React-Emotion

先聊聊 HTML-in-JS之JSX：

我在初次接触 JSX 时，对其将 HTML 和 JS 耦合在一起的方式完全不能接受。
我深深地认为 Web 开发能迅速流行且已20多年还保持强壮生命力的原因，与其 HTML / CSS / JS三者间松耦合的简单设计有很大关系。
而 JSX 完全抛弃了这种设计，让代码乍看之下非常丑陋...

但转念一想，React 能这么火，可定有原因，我就耐住这非常不好的第一印象继续学习它...

随着深入，我了解到 JSX 解决了前端开发的一个巨大痛点：通过 JSX 能轻松将「数据与 UI 保持同步」！
过去，我们想将请求到的数据挂载到 HTML 上要写大量的 JS 代码操作 DOM 接口，而且这些代码量大且复用性差。
而在 JSX 中，就不存在 JS 操作 DOM 了，因为 HTML 就是 JS 的一部分，JS的灵活性能在 HTML 上完美体现！
从这层意义上看，使用 JSX 的 React 很像 Web 开发语言的升级版，而不仅仅是一个框架。

下面，要介绍的 emotion 即是 JSX 思路的 CSS 实现，即将 JS 的灵活性应用到 CSS 上。

我对 emotion 的了解始于下图的 demo: (代码)

其主题有 light 和 dark 两种
上面的 Demo 通过 <Button /> 很容易地将整个 App 在两种 Style 间切换。

React-Emotion 使得我们可以通过操作 React 的 props 操作 CSS:

const H1 = styled('h1')(
  {
    fontSize: '24px',
    fontWeight: 'lighter'
  },
  props => ({ color: props.color || '#333' })
)

如上，我们便以<h1> "wrap" 了一个 <H1> 组件，且可通过 <H1 color="red"> 的方式设置标签的 color 。

PS：Emotion 还有很多其他很好的操作方式，因为用法非常简单，且官网的介绍非常详细，所以本文不对其用法做详细介绍。