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}
Image placeholder
前端答疑
未设置
  75人点赞

没有讨论,发表一下自己的看法吧

推荐文章
asp.net如何调用css

asp.net如何调用css1、静态方式调用在head标签中加入link标签2、引用了模板页的页面添加方式首先可以定义一个类:(相关课程推荐:css视频教程)staticpublicclassAddS

Java Web html无法引用css?

JavaWebhtml无法引用css?javaweb中html无法引用css是因为css文件放置的位置不正确,css文件应该放在与WEB-INF同级目录,而不是WEB-INF文件夹内。(相关课程推荐:

div中怎么调用css?

div中怎么调用css?div中调用css样式有多种方法,比如:1、在style标签中调用css样式;2、添加class属性调用css样式;3、添加id属性调用css样式。1、DIV标签内直接应用CS

为什么用CSS?

CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

dw如何使用css设置字体

dw如何使用css设置字体设置页面中的字体可以使用“页面属性”对话框,页面属性可以设置网页的字体、背景颜色和背景图像等样式。具体操作方法如下:1、选择“文件”>“页面属性”,或单击文本的属性检查器中的

如何使用css取消字体下划线?

在给文字加上超链接锚文本(htmla)后,字体就被默认自动加上下划线样式,但可以通过CSS实现取消去掉全网页超链接的文字字体被加下划线样式。我们可以使用text-decoration:none来取消默

react如何写搜索框

react如何写搜索框react写搜索框的思路:1、添加一个input框,为它绑定onChange事件2、在onChange事件中通过拼接url和input框的内容得到一个搜索链接;3、通过fetch

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

如何在JavaWeb中用css

如何在JavaWeb中用css一、css概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效二.、好处:1.功能强大2.将内容展示和样式控制

如何用css做导航栏?

如何用css做导航栏?1、新建一个html文件,在head部分,编写css样式○list-style-type:none;是除掉导航前面默认带的点○lia,lia.active,lia:hover:n

使用css样式表有哪些好处?

使用css样式表有哪些好处?下面给大家总结下CSS的优点:一、CSS的代码更少我们在公共样式类中可以定义具有值的属性,并且能在不同位置使用相同的类,因此我们可以使用较少的代码,来实现更多的功能。更少的

koala如何压缩css?

koala如何压缩css?koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容

dreamweaver怎么新建css?

dreamweaver怎么新建css?1、新建一个htlm文档,在body中插入一个div,将ID命名为main2、在右侧的CSS设计器点击源的加号,选择在页面中定义3、点击选择器的加号,输入#mai

怎么用css美化网页

怎么用css美化网页1、我们先来看一下没有进过美化的html页面是什么样子吧。2、然后我们来看一下有美化效果的样子是什么样子,是不是漂亮一些。(相关课程推荐:css视频教程)3、准备好自己需要修饰的h

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp

dw怎么用css样式?

dw怎么用css样式?首先介绍一下CSS样式的属性:CSS样式属性被分为八大类:类型,背景,区块,方框,边框,列表,定位,扩展。类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示:方法一:内联

怎么用css样式为网页做竖杠?

怎么用css样式为网页做竖杠?两种方法1、带竖线的字,在每个导航标记后面加入'|'这个就是竖线(shift+回车上方的按键) Document ul{ display:flex; justif

怎么用css画圣诞树?

画圣诞树,我们首先需要会用css画三角形,(相关推荐:如何用css3画三角形)。学会了画三角形,我们就可以开始画圣诞树了。用css画圣诞树的步骤:(1)画两个三角形,先画出两个大小不同三角形。#tri

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

多个ul怎么定义不同css?

多个ul怎么定义不同css?相同的元素,定义不同的css,只需要活用选择器就可以实现了。1、给ul命名,idclass都行,例如 CSS中就是把ul换成相应的名字:(注意空格)div#myul{}//