以下4种 React 样式解决方案你选哪种？

Question

据我所知的方案有这几种

1. 传统css，通过import引入
2. css扩展语言如 less sass，通过loader和模块编译 import引入

3. Pure CSS in JS
   把样式通过行内样式形式写入jsx标签内如

   <Box style={{borderBottom:'1px solid black'}} />

   或
   把样式通过在标签外以对象形式书写，在标签内引入如

   css={
       box:{ borderBottom:'1px solid red', color:'white' }
   }
   <Box style={css.box} />

4. Styled-Components (css in js), 一种样式即组件组件即样式的解决方式

   const Box = styled.div`
       border-bottom: 1px solid yellow;
       color: white;
   `
   ...
   <Box />

个人感觉第4种是功能最强大，最稳定也最灵活的，但是最近通过行内样式 2、3的方案书写，感觉也没什么问题，毕竟react的哲学就是组件化，你写一次样式，就不用再重复书写了。至于第2种方案，个人感觉不是很好用，首先配置麻烦，其次有悖react哲学的，less sass中的嵌套关系多，这就导致组件无法灵活的分离使用，耦合性太强，重用起来难维护

那么大家的观点是如何呢？

Answer 1

我选第二种，一个组件一个scss文件。
其它方案再好，也没有scss来得强大。

Answer 2

建议使用className，可以定义一些公共样式，如： mr-10 (margin-right: 10px;)

Answer 3

用第二种~~~~