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的方法，但其目的和第三种都差不多，都是为了防止样式污染，在此就不一一叙述了，感兴趣的同学可以自己百度