react react使用css

現在使用腳手架（react-create-app）的項目不需要在在css文件后面添加module就會自動為其添加模塊化后綴

在react 中使用css有以下幾種方法

第一種全局使用

app.js

import React from 'react';
import Router from "./router"

import './App.css';

function App() {
    return (
        <div className="App">
            <div className='head'><span>app</span></div>
            <Router/>
        </div>
    );
}

export default App;

直接在入口文件引入，我這里是app.js 引入或css文件會作用至所有的組件，適合引入全局樣式

第二種使用 組件使用css

import React from 'react';
import './home.css' //直接引入css文件
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date().getTime()
        }
    }

    componentDidMount() {
        function f(){
            console.log("ffff");
        }
        console.log(false||f())
    }

    render() {
        return (
            <div>
//在jsx中使用
                <div className='head'>
                    <span>主頁</span>
                </div>
                <div><span>{this.date}</span></div>
            </div>
        )
    }
}

export {Home}

這種方法和第一種沒有太大的區別都是作用在全局上，但是這樣引入的css優先級並沒有第一種的高

第三種 現在前端都在追求模塊化的思想，上述的兩種方法，在組件數量非常大的時候，樣式污染問題就太痛苦了，所以在進行react開發的時候，普遍都是用，組件獨享css樣式的方法

CSS Modules

CSS Modules 的做法就是通過配置將.css文件進行編譯，編譯后在每個用到css的組件中的css類名都是獨一無二的，從而實現CSS的局部作用域。具體原理可以看看阮一峰老師的博客     CSS Modules 用法教程。

//home.module.css{
  head:{ //你定義的類名 被import的時候會變成對象的屬性
   color:red;
}
}


//home.js:
import React from 'react';
import head from'./home.module.css' //將home.css改成，react使用的webpack 會自動識別module.css文件后綴 然后將其編譯
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date().getTime()
        }
    }

    componentDidMount() {
        function f(){
            console.log("ffff");
        }
        console.log(false||f())
    }

    render() {
        return (
            <div>
                <div>
//在jsx中使用
                    <span className={head.head}>主頁</span>
                </div>
                <div><span>{this.date}</span></div>
            </div>
        )
    }
}

export {Home}

還用其他幾種引入css的方法，但其目的和第三種都差不多，都是為了防止樣式污染，在此就不一一敘述了，感興趣的同學可以自己百度