react中引入css的方式有哪几种?区别?
一、是什么
组件式开发选择合适的css
解决方案尤为重要
通常会遵循以下规则:
- 可以编写局部css,不会随意污染其他组件内的原生;
- 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;
- 支持所有的css特性:伪类、动画、媒体查询等;
- 编写起来简洁方便、最好符合一贯的css风格特点
在这一方面,vue
使用css
起来更为简洁:
- 通过 style 标签编写样式
- scoped 属性决定编写的样式是否局部有效
- lang 属性设置预处理器
- 内联样式风格的方式来根据最新状态设置和改变css
而在react
中,引入CSS
就不如Vue
方便简洁,其引入css
的方式有很多种,各有利弊
二、方式
常见的CSS
引入方式有以下:
- 在组件内直接使用
- 组件中引入 .css 文件
- 组件中引入 .module.css 文件
- CSS in JS
在组件内直接使用
直接在组件中书写css
样式,通过style
属性直接引入,如下:
import React, { Component } from "react"; const div1 = {
width: "300px",
margin: "30px auto",
backgroundColor: "#44014C", //驼峰法
minHeight: "200px",
boxSizing: "border-box"
}; class Test extends Component {
constructor(props, context) {
super(props);
} render() {
return (
<div>
<div style={div1}>123</div>
<div style={{backgroundColor:"red"}}>
</div>
);
}
} export default Test;
上面可以看到,css
属性需要转换成驼峰写法
这种方式优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
缺点:
写法上都需要使用驼峰标识
某些样式没有提示
大量的样式, 代码混乱
某些样式无法编写(比如伪类/伪元素)
组件中引入css文件
将css
单独写在一个css
文件中,然后在组件中直接引入
App.css
文件:
.title {
color: red;
font-size: 20px;
} .desc {
color: green;
text-decoration: underline;
}
组件中引入:
import React, { PureComponent } from 'react'; import Home from './Home'; import './App.css'; export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p>
<Home/>
</div>
)
}
}
这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响
组件中引入 .module.css 文件
将css
文件作为一个模块引入,这个模块中的所有css
,只作用于当前组件。不会影响当前组件的后代组件
这种方式是webpack
特工的方案,只需要配置webpack
配置文件中modules:true
即可
import React, { PureComponent } from 'react'; import Home from './Home'; import './App.module.css'; export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p>
<Home/>
</div>
)
}
}
这种方式能够解决局部作用域问题,但也有一定的缺陷:
- 引用的类名,不能使用连接符(.xxx-xx),在 JavaScript 中是不识别的
- 所有的 className 都必须使用 {style.className} 的形式来编写
- 不方便动态来修改某些样式,依然需要使用内联样式的方式;
CSS in JS
CSS-in-JS, 是指一种模式,其中CSS
由 JavaScript
生成而不是在外部文件中定义
此功能并不是 React 的一部分,而是由第三方库提供,例如:
- styled-components
- emotion
- glamorous
下面主要看看styled-components
的基本使用
本质是通过函数的调用,最终创建出一个组件:
- 这个组件会被自动添加上一个不重复的class
- styled-components会给该class添加相关的样式
基本使用如下:
创建一个style.js
文件用于存放样式组件:
export const SelfLink = styled.div`
height: 50px;
border: 1px solid red;
color: yellow;
`; export const SelfButton = styled.div`
height: 150px;
width: 150px;
color: ${props => props.color};
background-image: url(${props => props.src});
background-size: 150px 150px;
;
引入样式组件也很简单:
import React, { Component } from "react"; import { SelfLink, SelfButton } from "./style"; class Test extends Component {
constructor(props, context) {
super(props);
} render() {
return (
<div>
<SelfLink title="People's Republic of China">app.js</SelfLink>
<SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
SelfButton
</SelfButton>
</div>
);
}
} export default Test;
三、区别
通过上面四种样式的引入,可以看到:
在组件内直接使用
css
该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠
引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写
通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等
至于使用react
用哪种方案引入css
,并没有一个绝对的答案,可以根据各自情况选择合适的方案
react中引入css的方式有哪几种?区别?的更多相关文章
- 在HTML中引入CSS的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件. ㈠内联方式 内联方式指的是直接在 HTML 标 ...
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- HTML中引入CSS的四种常用方法及各自的缺点
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- 引入CSS的方式、link和@import的区别
引入CSS的方式有四种:内联方式.嵌入方式.链接方式.导入方式. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="back ...
- 在html中引入css、js和jQuery的方法
在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...
- React中的CSS模块
CSS模块 使用步骤: 1.新建一个XXX.moudle.css文件 2.在组件中引入css impor classes(变量) fro ...
- React中使用CSS
第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...
- 聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...
- 在React中使用CSS Modules设置样式
最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...
随机推荐
- iview viewdesign 里面的Select 输入添加 query不能从新为空 @on-create 解决方案 v-if 从新刷一遍
iview viewdesign 里面的Select 输入添加 query不能从新为空 @on-create 解决方案 v-if 从新刷一遍
- PE文件手工压缩
序 本文要压缩的PE文件来自软件漏洞这门课上布置的作业,代码逻辑很简单,直接运行就能看出来,就是调库来弹两个对话窗口.笔者主要记录一下对这个文件的分析和一步步实现手工压缩的过程.在此提供原文件的下载方 ...
- 基于python的PC电脑报警系统
一 基本概念 1.这里实现了电脑的安全报警系统,假如有人不小心动了你的电脑,立即触发报警系统.报警是通过pc机的声卡播放报警信号. 2.该的基础是对python的pyxhook和wave库的合理应用. ...
- 记录--两行CSS让页面提升了近7倍渲染性能!
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态.如果页面加载 ...
- tableau 工作表分页
原创优阅达数据科技有限公司 https://mp.weixin.qq.com/s?__biz=MzA5MTU3NDI2NQ==&mid=2649465570&idx=1&sn= ...
- 2024-03-23:用go语言,一张桌子上总共有 n 个硬币 栈 。每个栈有 正整数 个带面值的硬币, 每一次操作中,你可以从任意一个栈的 顶部 取出 1 个硬币,从栈中移除它,并放入你的钱包里。
2024-03-23:用go语言,一张桌子上总共有 n 个硬币 栈 .每个栈有 正整数 个带面值的硬币, 每一次操作中,你可以从任意一个栈的 顶部 取出 1 个硬币,从栈中移除它,并放入你的钱包里. ...
- KingbaseES V8R3集群部署案例之---通用机无ssh环境脚本部署集群
案例说明: 在一些通用机的生产环境,不允许主机之间通过ssh通讯,或者不允许root用户建立ssh互信或登录.默认KingbaseES V8R3集群通用机环境部署需要建立数据库用户及root用户,在集 ...
- windows系统设置状态栏时间显示读秒
windows系统设置状态栏时间显示读秒 要实现的效果如下图: 一.打开注册表 WIN+R输入[cmd]之后输入[regedit]回车 二.修改注册表 在注册表地址栏输入: HKEY_CURRENT_ ...
- 从bootstrap源码中学习Sass(一)
可以在github看代码,非常方便:https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss 就是有时候网络差. 基础用法 sc ...
- #NTT,原根#洛谷 3321 JZOJ 4051 [SDOI2015]序列统计
题目 分析 首先朴素dp方程 设\(dp[i][j]\)表示\(i\)个数的数列乘积为\(j\)的方案 那么\(dp[i][j*a[k]\bmod m]=itself+dp[i-1][j]\) 这可以 ...