React实战-ReactJs与传统Web页面中Css的使用差异

迷南。 2022-07-16 02:21 129阅读 0赞

React实战\-ReactJs与传统Web页面中Css的使用差异

网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似，但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异，我们可以定义特定的样式类名，也可以正对Html元素定义样式。差异主要在React对Css的使用上（微信react-javascript）：

l 引用的差异：

传统html文件中css文件引用方式：

<link rel="stylesheet" type="text/css" href="mystyle.css">

ReactJs中css文件引用方式：

你可以直接采用require:   require('./Category.css');

你也可以采用import:  import styles from './Category.css';

l 使用差异：

传统css的使用方式是设置class: <div class=”center”> test </div>

ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。

<div className='entry'>test </div>

另外

如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。

如果你采用import styles from './Category.css';的方式，则应采用以下方式。

<div className=\{style.entry\}>test </div>

l 最终解析文件的差异：

传统css文件一般依然保持着源码状态。

在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:

.customButton\{

Width:100px;

Heigth:30px;

\}

将转化为：

.index\_customButton\_23U0x\{

Width:100px;

Heigth:30px;

\}.

其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。

基本上ReactJS的css文件的使用差异到此为止了，你可以按照传统Css样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 React实战-对比ReactJs与ReactNative中的Flex用法

React实战\-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解

青旅半醒/ 2022年09月26日 03:57/ 0 赞/ 184 阅读

相关 ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C\、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Ma

系统管理员/ 2022年09月21日 13:26/ 0 赞/ 149 阅读

相关 AJAX与传统Web开发比较

AJAX：什么是AJAX AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML

Bertha 。/ 2022年08月05日 12:17/ 0 赞/ 136 阅读

相关 React实战-ReactJS+Redux的思考

React实战\-ReactJS+Redux的思考 ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经

妖狐艹你老母/ 2022年07月18日 05:27/ 0 赞/ 138 阅读

相关 React实战－Reactjs中的如何通过不可变数据对象提高页面性能

React实战－Reactjs中的如何通过不可变数据对象提高页面性能在使用ReactJs之后，我们知道Reactjs的UI更新方式，由于props或者state的数据变化都

我不是女神ヾ/ 2022年07月16日 06:14/ 0 赞/ 132 阅读

相关 React实战-如何在ReactJs中调用Google、Baidu地图

React实战\-如何在ReactJs中调用Google、Baidu地图在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放

喜欢ヅ旅行/ 2022年07月16日 03:43/ 0 赞/ 404 阅读

相关 React实战-ReactJs与传统Web页面中Css的使用差异

React实战\-ReactJs与传统Web页面中Css的使用差异网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的

迷南。/ 2022年07月16日 02:21/ 0 赞/ 130 阅读

相关移动Web实战篇-使用CSS Sprites减少你的页面http请求

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn] ![移动Web.jpg][Web.jpg]

àì夳堔傛蜴生んèń/ 2022年05月30日 00:58/ 0 赞/ 129 阅读

相关 React项目中使用 CSS Module

安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。但是我们这里不需要安装

阳光穿透心脏的1/2处/ 2021年08月30日 22:48/ 0 赞/ 377 阅读

相关 Hibernate实战——使用传统的映射文件

一配置文件 <?xml version="1.0" encoding="GBK"?>

柔情只为你懂/ 2021年07月24日 22:08/ 0 赞/ 309 阅读