下面来将JSS和内联样式进行对比。
内联样式：
import React from 'react' const Button = () => { const buttonGreen = { backgroundColor: "green", border: "1px solid white", borderRadius: "2px" }; return( <button style={buttonGreen}> green </button> ) } 复制代码
React-JSS：
import React from 'react' import {createUseStyles} from 'react-jss' const useStyles = createUseStyles({ buttonGreen: { backgroundColor: "green", border: "1px solid white", borderRadius: "2px" } }) const Button = () => { const {buttonGreen} = useStyles() return( <button className={buttonGreen}> green </button> ) } 复制代码
可以看到，相对于普通的内联样式，React-JSS的特征如下：
- 导入了一个createUseStyles方法；
- 通过createUseStyles方法方法创建一个useStyles hook；
- 通过参数对象的方式将样式传递给createUseStyles方法；
- 通过解析useStyles hook的返回值获取到组件样式buttonGreen；
- 将buttonGreen传递给组件的className进行解析。
那如果想要传递props，两者又会有什么不同的呢？接着来看：
内联组件：
import React from 'react' const Button = ({backgroundColour, children}) => { const buttonStyles = { backgroundColor: backgroundColour, border: "1px solid white", borderRadius: "2px" }; return( <button style={buttonStyles}> {children} </button> ) } 复制代码
React-JSS：
import React from 'react' import {createUseStyles} from 'react-jss' const useStyles = createUseStyles({ buttonStyles: { backgroundColor: backgroundColour => backgroundColour, border: "1px solid white", borderRadius: "2px" } }) const Button = ({backgroundColour, children}) => { const {buttonStyles} = useStyles(backgroundColour) return( <button className={buttonStyles}> {children} </button> ) } 复制代码
可以通过以下方式来调用上面的组件：
import React from 'react'; import Button from 'Button'; const SomePage = () => ( <Button backgroundColour="blue">blue</Button> ) 复制代码
这里的区别也是显而易见的，需要将传递的props的值传给useStyles方法，这样就可以在createUseStyles中使用了。这就是React-JSS的基本使用了。下面来看看它的优缺点
React-JSS的优点：
- 可重用性： 组件是可重用的，所以一次编写即可在任何地方使用它们；
- 动态样式： 可以使用props动态设置样式；
- 局部范围： JSS支持局部样式。
React-JSS的缺点：
- 额外的层： 使用React-JSS库会使得React程序多一个额外的层，这个有时是不必要的；
- 代码可读性： 通过这种方式也会自动生成类名，它们都是唯一的，可阅读性较差，
尤其是在浏览器进行调试时，难以确定这个样式是在哪里定义的。
上面介绍了五种常用的React样式策略，这五种策略并没有绝对的好或坏，都各有优缺点，可以根据实际的业务场景去使用。
