material-ui中初探css in js

前期整了个个人博客系统,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名,

《material-ui中初探css in js》

命名很有规律,更多其他规律可以自己尝试下。

那么在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。

《material-ui中初探css in js》

我也找了好多中处理方法,都还是在报错,所以只能换种写法了,

// @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 。

点赞

发表评论

电子邮件地址不会被公开。