import ./App.css;
function App() {return (

react如何使用css?

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}

本文来自React答疑栏目,欢迎学习!

以上就是react如何使用css?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    如何使用计算机加速引导盘

    如何使用计算机加速引导盘,,点评:随着磁盘读写速度的大大提高,U的作用越来越大,比如磁盘加载系统,用U盘维护系统等等。今天我给大家带来的是如

    如何使用笔记本wifi

    如何使用笔记本wifi,,无线上网笔记本分为两种,一个是连接无线局域网的无线网络卡的使用近(WLAN、WI-FI),一种是使用USB调制解调器实现3G无线网

    阿虎医考电脑版|阿虎医考app免费版

    阿虎医考电脑版|阿虎医考app免费版,,阿虎医考app免费版历年实践技能通过率在60%左右,并且每年呈下降趋势。也就是说,实践技能的考试越来越难

    惠普笔记本如何使用惠普笔记本

    惠普笔记本如何使用惠普笔记本,,惠普笔记本相信每个人都不会陌生,在PC行业是全球知名企业之一。有很多朋友围绕惠普品牌笔记本使用,今天有网

    移动硬盘如何使用移动硬盘维护知识

    移动硬盘如何使用移动硬盘维护知识,,现在移动硬盘的广泛使用和快节奏的工作使拆迁的一部分;驱动;人,我们说不;拆除;拆除手段,在硬盘有意无意的操

    如何免费注册appid

    如何免费注册appid,右下角,应用程序,如何免费注册appid1.打开Appstore2.任意点开一个免费应用程序,并点击下载。3.从弹出的对话框中,选择“

    wps表格按纽如何使用

    wps表格按纽如何使用,WPS教程,1.再WPS表格中如何设置按钮第一步需要您确认您的Excel菜单中有没有开发工具这一选项,若没有我们需要手动添加

    抢购手机 逸享生活APP下载抢购手机

    抢购手机 逸享生活APP下载抢购手机,抢购手机,自从华为荣耀系列从华为独立出来,荣耀手机的关注度与日俱增,华为商城也像小米一样成了广大网友