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名，

命名頗有規律，更多其餘規律能夠本身嘗試下。

那麼在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/...