共计 1798 个字符，预计需要花费 5 分钟才能阅读完成。
前期整了个个人博客系统，ui 库也是变换了好几个，最后还是用上了 material-ui。发现该 ui 库时居然没有像其他库一样引入 css 文件就可以显示，觉得很是神奇（选他只是觉得 ui 看的特别爽），后来才发现他样式是基于 css in js 的。
简介
发现 material-ui 的样式是基于 css in js 时，我很是想再换个 ui 库，毕竟用 less、sass 也是很不错的？况且，web 发展这么久，好不容易把三大基本元素给拆分开了，现在又要合并起来，很是反感。不过，细细看了下，发现感觉还不错。
如其表面意思一样，即是在 js 中写 css 样式，先不谈这么写的好处与坏处。想想我们平时写 css 的难处：
命名难，起名很是怕冲突。
样式覆盖问题（作用域）。
比 less，sass 更灵活的编程语法。
当然，这些问题在其他的像 css module 等方案中也是可以解决的。个人觉得，最后一点用的很是不错，将 css 逐步能推向编程语言的范畴。
简单使用
material-ui 中使用的是 jss 库，我们尝试在 react 项目中使用他。react 项目中要使用 react-jss 库，在 create-react-app 脚手架生成的代码中，修改 App.js，
import React, {Component} from ‘react’;
import withStyles from ‘react-jss’;
// 样式，使用 colorBlue 就对应后面的样式
const styles = {
colorBlue: {
color:’blue’
}
};
const Test = ({classes}) => {
return (
<span className={classes.colorBlue}>test</span>
);
};
const StyledTest = withStyles(styles)(Test);
class App extends Component {
render() {
return (
<div>
<StyledTest></StyledTest>
</div>
);
}
}
export default App;
3000 端口的页面可以看到字体已经是蓝色的了，将所有的样式以样式名: 样式内容的方式写在 styles 对象之中，再用 withStyles 注入到组件之中（也可以使用 injectSheet 代替 withStyles），其实使用上去还是不算太变扭。
看下在浏览器中渲染的 class 名，命名很有规律，更多其他规律可以自己尝试下。
那么在 class 方式定义的组件中怎么使用呢？忽略相同的 import 和 styles 的定义，看下组件的定义，
@withStyles(styles)
class App extends Component {
render() {
const {classes} =this.props;
return (
<span className={classes.colorBlue}>text</span>
);
}
}
export default App;
不过很可惜，在 create-react-app 项目中，es7 的修饰器是不支持的，提示 Support for the experimental syntax‘decorators-legacy’isn’t currently enabled。
我也找了好多中处理方法，都还是在报错，所以只能换种写法了，
// @withStyles(styles)
class App extends Component {
render() {
const {classes} =this.props;
return (
<span className={classes.colorBlue}>text</span>
);
}
}
export default withStyles(styles)(App);
这下页面正常了。更多的用法可以查看他的官方文档。
总结
使用的时候又发现了个优点，
生成的样式只适用于对应的页面，可以惰性加载，且没有冗余的样式代码。
缺点肯定也是有的，
又增加了学习成本。
当在大型项目中使用时，不知道会不会乱起来。
样式权重没了，覆盖成了问题，难道只能用 important?
没法和 postcss 一起使用。
理念了解后，可以尝试下其他的 css in js 库，比如 styled-component 等等。
留下项目地址：https://github.com/2fps/blooog。个人博客地址：http://www.zhuyuntao.cn/2019/…
