React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （下）

最近写React一直在纠结样式的问题，今天找了篇看起来很不错的文章，认真读三遍先...

原文链接：https://juejin.im/post/5b3dd2d25188251b193d2d7e

React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （下）

If you are not paying for the product, you are the product.
当一个商品是“免费”的，那往往你成了商品。

终于有时间静下心学点东西，把这个系列最后一篇填上。 中篇 介绍了 tachyons, 本篇介绍个人的最爱，没有之一：styled-jsx。

选择标准

在打算使用一个新 css 框架前，需要好好想清楚它是否在你的所有使用场景里圆满完成任务，我总结了几点：

• 是否解决了React开发的痛点：局部css，动态css？
• 是否支持所有css甚至是sass用法？伪类,嵌套，动画，媒体查询？
• 是否兼容你需要使用的第三方UI库？
• 是否能和纯css，或者是其他css框架很好共存，以备遇到特殊情况可以有方案B？
• 性能？大小？

styled-jsx

zeit 的一系列产品从 now，到 next.js，我算是一个脑残粉。简洁好用是我对 zeit 的项目的印象。而且一套库自成系统，styled-jsx 和 next.js 完美兼容。

1. 基础用法

styled-jsx 概括第一印象就是 React css 的 vue 解决。
yarn add styled-jsx 安装后，不用import，而是一个babel插件，.babelrc配置：

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

然后就直接用了

render () {
    return <div className='table'>
        <div className='row'>
            <div className='cell'>A0</div>
            <div className='cell'>B0</div>
        </div>
        <style jsx>{`
          .table {
            margin: 10px;
          }
          .row {
            border: 1px solid black;
          }
          .cell {
            color: red;
          }
    `}</style>
    </div>;
}

• ``的位置可以按喜好自定，样式总是作用于组件的所有元素
• 样式只作用于本组件，不影响全局也不影响子组件
• 实现方式大致是给组件内所有标签自动加上了一个独特className 例如

const App = () => (
  <div>
    <p>只有这个p会被上样式</p>
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

会被转化成

import _JSXStyle from 'styled-jsx/style'

const App = () => (
  <div className='jsx-123'>
    <p className='jsx-123'>只有这个p会被上样式</p>
    <_JSXStyle styleId='123' css={`p.jsx-123 {color: red;}`} />
  </div>
)

从实现到原理，对比vue是不是非常像呢？如果你不喜欢将样式写在 render 里，styled-jsx 提供了一个 css 的工具函数：

import css from 'styled-jsx/css'

export default () => (
  <div>
    <button>styled-jsx</button>
    <style jsx>{button}</style>
  </div>
)

const button = css`button { color: hotpink; }`

非常完美的css解决方案。 下面针对“选择标准”里提到的各个方面考察一下 styled-jsx

2. 动态css

和 styled-components，Motion 等模板字符串的解决方案一样，动态css轻而易举

export default (props) => (
  <div>
    <button>styled-jsx</button>
    <style jsx>{
      `button { color: ${props.color}; }`
    }</style>
  </div>
)

同个组件里可以写无限个``标签，这里的最佳实践是将静态的css放一个标签，动态的放另一个，每次渲染时只有动态的重新计算和渲染

const Button = (props) => (
  <button>
     { props.children }
     <style jsx>{`
        button {
          color: #999;
          display: inline-block;
          font-size: 2em;
        }
     `}</style>
     <style jsx>{`
        button {
          padding: ${ 'large' in props ? '50' : '20' }px;
          background: ${props.theme.background};
        }
     `}</style>
  </button>
)

两点注意：

• 只有写在 render 函数里的style是动态的，所以动态css不能如第二例那样提取出来
• 原声解决方法的 style props的样式会覆盖 styled-jsx 的样式

3. 如何使用Sass

两个字，插件。

• styled-jsx-plugin-sass
• styled-jsx-plugin-postcss
• styled-jsx-plugin-stylelint
• styled-jsx-plugin-less
• styled-jsx-plugin-stylus

一应俱全。以Sass为例：

yarn add -D node-sass styled-jsx-plugin-sass

.babelrc配置

{
  "plugins": [
    [
      "styled-jsx/babel",
      { "plugins": ["styled-jsx-plugin-sass"] }
    ]
  ]
}

即可使用Sass。

4. 全局css

如同 Vue 以 scoped 为关键字，styled-jsx 以 global 为关键字。

export default () => (
  <div>
    <style jsx global>{`
      body {
        background: red
      }
    `}</style>
  </div>
)

全局样式注明 global 即可。

有极少情况（比如传一个全局类给三方库）需要使单个选择器全局化，语法类似 css-module

div :global(.react-select) {
    color: red
}

5. 三方UI库的支持

相对有点繁琐，思想是取得styled-jsx转化过后的类名，注入到三方库的className props里，这样即解决了支持，又保全了局部css，代码如下

import Link from 'react-router-dom' // 例子，给Link组件添加样式

const scoped = resolveScopedStyles(
  <scope>
    <style jsx>{'.link { color: green }'}</style>
  </scope>
)

const App = ({ children }) => (
  <div>
    {children}
    <Link to="/about" className={`link ${scoped.className}`}>
      About
    </Link>
    
    {scoped.styles}
  </div>
);

function resolveScopedStyles(scope) {
  return {
    className: scope.props.className, //就是被styled-jsx添加的独特className
    styles: scope.props.children      //就是style，注入到App组件中
  }
}

当然，如果你不介意局部不局部，可以使用上面提到的:global() 语法

// 比如Form组件有类名form-item
export default () => (
  <div>
    <Form />
    <style jsx>{`
      div > :global(.form-item) {
        color: red
      }
    `}</style>
  </div>
)

6. 语法高亮与补完

我使用VSCode：

• 语法高亮
• 自动补完

其他的见 github 上 readme。

7. 大小？性能？

• 可使用所有css语法
• 3kb的gzip大小
• 浏览器的prefix自动加了
• 有source-map 支持，方便debug
• 据作者说性能也很高

8. style-jsx vs styled-components

谢谢ziven27提议，我试着说说和现在最流行的 styled-components 库的区别。（方便讨论，“前者”代指style-jsx，“后者”代指style-components）

• 最大区别在于前者样式作用于整个组件，后者的样式只作用于所包裹的元素。打个比方就如同vue和inline css的区别。但其实只要使用sass的&嵌套，后者也是可以包裹组件最外层元素然后将其他元素样式统统写入的。虽然感觉不是后者的初衷。
• 后者与提供className props的三方库完美整合（比前者简洁太多）：

const RedButton = styled(Button)`background: red;`

但对不提供className props的三方库一筹莫展（当然这种情况不太出现）。

• 后者由于使用了HOC模式，与其他所有HOC一样要处理ref的问题（包裹层的ref不同于原本元素的ref），多一事。
• 个人觉得前者的规则简洁明了（css怎么写就怎么写），后者有不少“魔术”的部分（比如props，theme），也引入了很多高级用法如.extends 样式继承以及.attrs封装公用props。

这里提到一个话题，到底是“魔术”好呢，还是朴实好呢？举个例子，比如theme（主题）：

// styled-components 使用Provider提供主题，主题可以是样式，也可以是函数
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

// 主题的样式
const theme = {
  fg: 'palevioletred',
  bg: 'white'
};

// 换前景色和背景色的函数
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>Default Theme</Button>

      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);

甚至还提供了一个HOC，在styled-components外使用theme

import { withTheme } from 'styled-components'

强大不强大？对比之下，styled-jsx没有任何与theme相关的api，只是朴朴实实地靠props传递达成主题：

// styled-jsx
import { colors, spacing } from '../theme'
import { invertColor } from '../theme/utils'

const Button = ({ children }) => (
  <button>
     { children }
     <style jsx>{`
        button {
          padding: ${ spacing.medium };
          background: ${ colors.primary };
          color: ${ invertColor(colors.primary) };
        }
     `}</style>
  </button>
)

这个问题要看应用场景和个人喜好吧，我属于不喜欢过多“魔术”，爱简单api（哪怕多点代码）的那派。大家有啥想法和指正，多多留言。

最后

有2个细小缺点

1. 和CRA整合时，css-in-js 的解决方式不会热加载，每次都刷新页面。
2. 和CRA整合时，由于是babel插件，需要eject或者使用react-app-rewired来加入 babel plugin 的设置。

之前有小伙伴留言表示有坑（谢谢，看到这样的留言觉得写blog的决定太对了）

同样觉得styled-jsx非常好，最近一直在用。
但目前还是有些不成熟的地方，主要是：
1、局部样式无法支持第三方组件标签，只能支持普通html标签
2、对stylelint缺乏支持，官方出的stylelint插件只是一个demo。在vscode中用stylelint插件时也是有很大的坑。

个人觉得1的场景已经在上面讨论了，可以兼容。2的话，本人上个项目里裸prettier，所以没试过那个插件，在这里提一下。

总之目前用过一次，我很喜欢，也很满意。希望大家也找到自己喜欢的一个或者是一套解决方法。

最近面试，明白了自己有许多需要重点研究的课题。看了些 PWA 相关的文和视频，已经上船了。一句话：PWA 是未来，而且是近在眼前的未来。之后打算分享一下自己的学习笔记。