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

于谦
  • 31

据我所知的方案有这几种

  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中的嵌套关系多,这就导致组件无法灵活的分离使用,耦合性太强,重用起来难维护

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

回复
阅读 2.6k
3 个回答

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

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

用第二种~~~~

宣传栏