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

  • 引用的差异:

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

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

ReactJs中css文件引用方式:

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

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

  • 使用差异:

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

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

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

另外

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

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

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

2.<div style={{marginTop:10}}>test </div>

3.import ReactDOM from 'react-dom';

<Button ref="button" />

const button = ReactDOM.findDOMNode(this.refs.button);

button.setAttribute('disabled', 'true');

  • 最终解析文件的差异:

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

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

.customButton{

}

将转化为:

.index_customButton_23U0x{

}.

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

React中css的使用的更多相关文章

  1. react 中 css模块化类名 和普通全局类名 一起使用

    <div className={[`${styles.tableOpers}`,`clearfix`].join(' ')}></div>

  2. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  3. React中使用CSS

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...

  4. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  5. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  6. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  7. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  8. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  9. react中antd+css Module一起使用

    antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...

随机推荐

  1. JS排序--快速排序

    用 JavaScript 实现快速排序代码如下: /* * @author liphong * @data 2019/02/24 */ var arr = []; // 需要被排序数组 /* * 分离 ...

  2. 进程间通信,把字符串指针作为参数通过SendMessage传递给另一个进程,不起作用

    参数发送进程: CString csCmd=AfxGetApp()->m_lpCmdLine; if (!csCmd.IsEmpty()) { pWndPrev->SendMessage( ...

  3. 【extjs6学习笔记】0.2 准备:类库结构

  4. SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行。

    Oracle数据导入报错:SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行. 原因:进入sqlplus里是不能执行imp的(sqlplus不认 ...

  5. x-shell配置远程连接

    1. 打开x-shell 2. 配置编译属性 3. 配置用户的身份证信息 5. 配置完成之后选择连接

  6. 运行spark自带的例子出错及解决

    以往都是用java运行spark的没问题,今天用scala在eclipse上运行spark的代码倒是出现了错误 ,记录 首先是当我把相关的包导入好后,Run,报错: Exception in thre ...

  7. nginx “403 Forbidden” 错误 解决方法

    错误的原因是缺少index.html或者index.php文件,就是配置文件中index index.html index.htm这行中的指定的文件 只需要配置时加一句  index  index.h ...

  8. python之路——目录

    目录 python基础部分 基础部分 介绍.基本语法.流程控制 列表 元祖 字符串 字典 集合 文件操作 函数 变量 递归 迭代器,生成器,装饰器,Json和pickle 数据序列化 函数 初识函数 ...

  9. 1653: Champion of the Swordsmanship

    1653: Champion of the Swordsmanship Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 11  Solved: 8[Subm ...

  10. OS X快捷键小技巧

    退出command+Q,关分页Command+W,刷新Command+R,新开分页Command+T 全屏 ctrl+command+F 每个Mac使用者都知道点击下窗口左上角黄色圆形的按钮就可以最小 ...