前期整了个个人博客系统，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/…