react如何使用css？

在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优先级并没有第一种的高

三、CSS Modules

CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。

//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}